import Button from "@/components/Forms/Button";
import {
  cadastrarAutomatizacao,
  cadastrarFunilParalelo,
  deletarAutomatizacao,
  deletarFunilParalelo,
  editarAutomatizacao,
  listarFunilParalelo,
  listarTodosKanbans,
} from "@/requests/CRM/kanban";
import { useEffect, useState } from "react";
import CardEtapaAutomatizada from "./CardEtapaAutomatizada";
import FormParametorosAutomatizacao from "./FormFunisParalelos";

const FormFunisParalelosComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [etapasAutomatizadas, setEtapasAutomatizadas] = useState<any[]>([]);
  const [funisParalelos, setFunisParalelos] = useState<any[]>([]);

  const [etapas, setEtapas] = useState<any[]>([]);
  const [acoes, setAcoes] = useState<any[]>([]);
  const [funis, setFunis] = useState<any[]>([]);

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

  const atualizarListaFunisParalelos = () => {
    listarFunilParalelo().then((res: any) => setFunisParalelos(res));
  };

  useEffect(() => {
    setEtapas([...funis.map((funil) => funil.listas_kanban).flat()]);
  }, [funis]);

  const listarFunis = () => {
    listarTodosKanbans().then((res) => setFunis(res));
  };

  const removerFunilParalelo = async (id_funilParalelo: any) => {
    setIsLoading(true);
    return deletarFunilParalelo({ id_funil_paralelo: id_funilParalelo }).finally(() => {
      setIsLoading(false);
      atualizarListaFunisParalelos();
    });
  };

  const onSubmitFunction = async (data: any) => {
    setIsLoading(true);

    const { funil_destino, funil_atual, ...formattedData } = data;
    data = formattedData;

    // const indexOfEtapa = funisParalelos.findIndex(
    //   (e: any) =>
    //     e.acao_automatizacao == data.acao_automatizacao &&
    //     e.status_acao_automatizacao == data.status_acao_automatizacao
    // );
    // if (indexOfEtapa == -1) {
    cadastrarFunilParalelo(data).finally(() => {
      atualizarListaFunisParalelos();

      setIsLoading(false);
    });
    // } else {
    //   editarAutomatizacao(data).finally(() => {
    //     setEtapasAutomatizadas((etapasAuto) => {
    //       const newEtapasAuto = [...etapasAuto];
    //       newEtapasAuto.splice(indexOfEtapa, 1, data);
    //       return newEtapasAuto;
    //     });

    //     setIsLoading(false);
    //     atualizarListaFunisParalelos();
    //   });
    // }
  };

  return (
    <>
      <FormParametorosAutomatizacao
        onSubmitFunction={onSubmitFunction}
        funis={funis}
        etapas={etapas}
        etapasAutomatizadas={etapasAutomatizadas}
      >
        <div className="w-full flex flex-row justify-center p-4">
          <Button className="text-sm w-29" loading={isLoading}>
            Salvar
          </Button>
        </div>
      </FormParametorosAutomatizacao>
      <div
        className={`flex ${
          etapasAutomatizadas.length > 0 ? "flex-col" : "flex-row"
        } bg-body bg-opacity-10 rounded-md min-h-[200px]`}
      >
        {funisParalelos.length > 0 ? (
          <table className="w-full">
            <tbody>
              {funis &&
                etapas &&
                funisParalelos?.map((etapaAuto, index) => {
                  

                  const etapaOrigem = etapas.find(
                    (etapa: any) =>
                      etapa.id_etapa_funil == etapaAuto.etapa_funil_paralelo
                  );
                  const funilOrigem = funis.find(
                    (funil: any) =>
                      funil.id_funil == etapaOrigem?.grupo_etapa_funil
                  );
                  const etapaDestino = etapas.find(
                    (etapa: any) =>
                      etapa.id_etapa_funil ==
                      etapaAuto.etapa_destino_funil_paralelo
                  );

                  const funilDestino = funis.find(
                    (funil: any) =>
                      funil.id_funil == etapaDestino?.grupo_etapa_funil
                  );

                  return (
                    funilDestino?.id_funil && (
                      <CardEtapaAutomatizada
                        etapaAuto={etapaAuto}
                        funilOrigem={funilOrigem}
                        etapaOrigem={etapaOrigem}
                        etapaDestino={etapaDestino}
                        funilDestino={funilDestino}
                        funis={funis}
                        etapas={etapas}
                        onSubmitFunction={onSubmitFunction}
                        isLoading={isLoading}
                        removerFunilParalelo={removerFunilParalelo}
                        key={index}
                        indexCard={index}
                      />
                    )
                  );
                })}
            </tbody>
          </table>
        ) : (
          <div className="w-full h-full flex flex-col justify-center items-center self-center">
            Não há etapas Configuradas
          </div>
        )}
      </div>
    </>
  );
};

export default FormFunisParalelosComponent;