import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  atualizarListasKanbans,
  listarTodosKanbans,
} from "@/requests/CRM/kanban";
import FunilContext from "@/src/contexts/boardContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useEffect, useRef, useState } from "react";
import Fluxo from "./Fluxo";

const FluxoComponent = () => {
  const [funis, setFunis] = useState<any[]>([]);
  // const [diasAtividade, setDiasAtividade] = useState("");

  const { listarDadosKanban } = useKanbanContext();

  const funnelsBar = useRef(null);

  useEffect(() => {
    listarFunis();
  }, []);

  const listarFunis = async () => {
    // obterDiasAtividadeFunil().then((res) =>
    //   setDiasAtividade(res.dias_atividade_etapa_funil)
    // );
    return listarTodosKanbans().then((res) =>
      setFunis(
        res.sort((a: any, b: any) =>
          a.titulo_funil.localeCompare(b.titulo_funil)
        )
      )
    );
  };

  const atualizarFunis = async (
    transformFunction: any = undefined,
    canReList = true
  ) => {
    return setFunis((funis: any) => {
      if (transformFunction) {
        funis = transformFunction(funis);
      }
      const newKanbans = funis?.map((list: any, index: number) => {
        let newListas_kanban = list.listas_kanban.map(
          (etapa: any, index2: any) => {
            const updatedList = {
              ...etapa,
              index_etapa_funil: String(index2),
              grupo_etapa_funil: list.id_funil,
            };
            return updatedList;
          }
        );
        return {
          ...list,
          listas_kanban: newListas_kanban,
          index_funil: String(index),
        };
      });
      atualizarListasKanbans(newKanbans).finally(() => {
        listarDadosKanban();
        if (canReList) {
          return listarFunis();
        }
      });
      return newKanbans;
    });
  };

  const [isCreatedNewFunnel, setIsCreatedNewFunnel] = useState(false);

  return (
    <FunilContext.Provider value={{ funis, updatedList: funis }}>
      <div className="w-full overflow-auto max-sm:text-xs " ref={funnelsBar}>
        <section className="w-min pt-[10px]">
          <div className="flex flex-row gap-2 overflow-auto w-full">
            {funis &&
              funis
                ?.filter((funil) => funil.status_funil == "1")
                .map((funil, index) => (
                  <Fluxo
                    key={index}
                    funil={funil}
                    funis={funis}
                    index={index}
                    atualizarFunis={atualizarFunis}
                    isCreatedNewFunnel={isCreatedNewFunnel}
                    setIsCreatedNewFunnel={setIsCreatedNewFunnel}
                    funnelsBar={funnelsBar}
                  />
                ))}
          </div>
        </section>
        {funis && funis[0] == undefined && (
          <div className="w-full h-[500px] flex flex-col justify-center items-center">
            <LoaderSun />
          </div>
        )}
      </div>
    </FunilContext.Provider>
  );
};

export default FluxoComponent;