import { listarFunisEtapasCard } from "@/requests/CRM/kanban";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useEffect, useState } from "react";
import { FaArrowRight } from "react-icons/fa";

const CardFluxos = ({ dadosLista, dadosCard, etapasFunil }: any) => {
  const [height, setHeight] = useState<string | undefined>();
  const { logout, valuesSession, perfil, usuario } = useAuth();
  const { session } = valuesSession();
  const { isMobile } = useScreenContext();

  // useEffect(() => {
  //   listarFunisEtapasCard().then((res) => {
  //     const filteredFunisEtapas = res.filter(
  //       (fluxo: any) => fluxo.id_coleta_card === dadosCard?.id_coleta_cliente
  //     );

  //     setEtapasFunil(filteredFunisEtapas);
  //   });
  // }, [dadosCard]);

  return isMobile ? (
    <div
      className="w-full p-4 bg-white rounded-lg shadow-md"
      style={{
        height: height,
      }}
    >
      <p className="text-sm text-black max-sm:text-xs font-bold justify-center text-center items-center">
        O negócio encontra-se nos seguintes fluxos
      </p>

      <div className="flex flex-col gap-4 mt-4  overflow-y-auto OverflowTabListEditCard">
        {etapasFunil.length > 0 ? (
          etapasFunil.map((item: any, index: any) => (
            <div key={index} className="flex items-center gap-2">
              <div
                className="flex-1 p-3 break-words border rounded-lg flex justify-center items-center text-center shadow-md"
                style={{
                  backgroundColor: item.cor_funil || "gray",
                  color: "white",
                }} // Aplica a cor do funil e texto branco
              >
                <span className="font-semibold  max-sm:text-[10px]">
                  {item.titulo_funil}
                </span>
              </div>
              <FaArrowRight className="text-gray-500" />
              <div
                className="flex-1 p-3 break-words border rounded-lg flex justify-center items-center text-center shadow-md"
                style={{
                  backgroundColor: item.cor_etapa_funil || "gray",
                  color: "white",
                }} // Aplica a cor da etapa e texto branco
              >
                <span className="font-semibold max-sm:text-[10px]">
                  {item.titulo_etapa_funil}
                </span>
              </div>
            </div>
          ))
        ) : (
          <p className="text-center text-gray-500">Nenhuma Etapa Encontrada</p>
        )}
      </div>
    </div>
  ) : (
    <div
      className="w-full p-4 bg-white rounded-lg shadow-md"
      style={{
        height: height,
      }}
    >
      <p className="text-sm text-black font-bold justify-center text-center items-center">
        O negócio encontra-se nos seguintes fluxos
      </p>

      <div className="flex flex-col gap-4 mt-4 overflow-y-auto OverflowTabListEditCard">
        {etapasFunil.length > 0 ? (
          etapasFunil.map((item: any, index: any) => (
            <div key={index} className="flex items-center gap-2">
              <div
                className="flex-1 p-3 break-words border rounded-lg flex justify-center items-center text-center shadow-md"
                style={{
                  backgroundColor: item.cor_funil || "gray",
                  color: "white",
                }} // Aplica a cor do funil e texto branco
              >
                <span className="font-semibold">{item.titulo_funil}</span>
              </div>
              <FaArrowRight className="text-gray-500" />
              <div
                className="flex-1 p-3 break-words border rounded-lg flex justify-center items-center text-center shadow-md"
                style={{
                  backgroundColor: item.cor_etapa_funil || "gray",
                  color: "white",
                }} // Aplica a cor da etapa e texto branco
              >
                <span className="font-semibold">{item.titulo_etapa_funil}</span>
              </div>
            </div>
          ))
        ) : (
          <p className="text-center text-gray-500">Nenhuma Etapa Encontrada</p>
        )}
      </div>
    </div>
  );
};

export default CardFluxos;