import { useRef } from "react";
import Step from "./Step";

const Fluxo = ({ funil, funis, atualizarFunis }: any) => {
  const steps = funil.listas_kanban;

  const stepArea = useRef(null);

  return (
    <div
      className="border-2 rounded-lg w-[300px] overflow-hidden flex-1 h-[470px] flex flex-col justify-between mb-3 relative"
      style={{
        height: `calc(-140px + 100vh)`,
        border: "3px solid #979797",
      }}
    >
      {funil.status_funil == "0" && (
        <div className="absolute top-0 left-0 w-full h-full bg-black-2/50 text-white font-bold text-7xl flex flex-col justify-center items-center">
          <div className="-rotate-45">INATIVO</div>
        </div>
      )}
      <div
        className={`flex flex-row justify-between items-center px-4 py-2`}
        style={{
          backgroundColor: `${funil?.cor_funil}60`,
          boxShadow: "0px 13px 29px -5px rgba(0, 0, 0, 0.5)",
        }}
      >
        <h3 className="text-current font-bold flex flex-row items-center">
          <div>
            <div className="p-2 pb-0">{funil.titulo_funil}</div>
          </div>
        </h3>
      </div>
      <ul
        className="p-4 transition-all flex flex-col gap-1 h-full overflow-auto"
        ref={stepArea}
      >
        {steps?.map((step: any, index: number) => (
          <Step
            key={step.id_etapa_funil}
            funil={funil}
            step={step}
            funis={funis}
            index={index}
          />
        ))}
      </ul>
    </div>
  );
};

export default Fluxo;