import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { Plus, Trash2 } from "lucide-react";
import { useState } from "react";

const FluxosCampos = ({
  setFluxos,
  funis,
  fluxos,
  defaultValues,
  etapasFluxos,
  form,
}: any) => {
  const [funilSelecionado, setFunilSelecionado] = useState<
    { i: number; id: string }[]
  >(() => getDefaultFunil());
  const adicionarFluxo = () => {
    setFluxos((prevFluxos: any) => [
      ...prevFluxos,
      { index: fluxos.length, id: "" },
    ]);
  };
  function getDefaultFunil() {
    const defVal = defaultValues?.funil_campo_personalizado?.split(",");
    const updatedFunis: any = [];
    defVal?.map((a: any, i: number) => {
      updatedFunis.push({ i: i, id: a });
    });
    return updatedFunis;
  }

  const removerFluxo = (id: number) => {
    // Primeiro, remove o fluxo do estado

    const fluxosRestantes = fluxos.filter((fluxo: any) => fluxo.id !== id);

    setFunilSelecionado((prev = []) => {
      const updatedFunis = prev.filter((item) => item.id !== String(id));
      return updatedFunis.map((item, index) => ({
        ...item,
        i: index,
      }));
    });

    setFluxos(fluxosRestantes);
    // Agora, reordena as listas de `form` após remover o fluxo
    const novasEtapasEsconder = form
      .getValues("etapasEsconder_campo_personalizado" as any)
      .filter((_: any, index: number) => fluxosRestantes[index]);
    const novasEtapasEditar = form
      .getValues("etapasEditar_campo_personalizado" as any)
      .filter((_: any, index: number) => fluxosRestantes[index]);
    const novoFunil = form
      .getValues("funil_campo_personalizado" as any)
      .filter((_: any, index: number) => fluxosRestantes[index]);

    // Atualiza o formulário com os valores reordenados
    form.setValue("etapasEsconder_campo_personalizado", novasEtapasEsconder);
    form.setValue("etapasEditar_campo_personalizado", novasEtapasEditar);
    form.setValue("funil_campo_personalizado", novoFunil);
  };
  const handleFunilChange = (index: number, value: string) => {
    setFunilSelecionado((prev = []) => {
      const updatedFunis = [...prev];

      const existingIndex = updatedFunis.findIndex((item) => item.i === index);

      if (existingIndex !== -1) {
        updatedFunis[existingIndex].id = value;
      } else {
        updatedFunis.push({ i: index, id: value });
      }

      return updatedFunis;
    });

    // setFluxos((prev) => {

    // });
  };
  // useEffect(() => {

  // }, [funilSelecionado]);

  return (
    <>
      <div className="flex gap-4 items-center">
        <h1>Fluxos</h1>

        <button
          className="flex text-sm bg-primary text-white rounded-full p-2 px-4 gap-2 items-center"
          type="button"
          onClick={adicionarFluxo}
        >
          <Plus size={12} />
          Adiciona Fluxo
        </button>
      </div>
      {funis &&
        fluxos.map((fluxo: any, index: number) => {
          const getFluxosValue = Array.isArray(
            form.control._formValues?.funil_campo_personalizado,
          )
            ? form.control._formValues.funil_campo_personalizado
                .map((item: any) => item?.value)
                .filter((value: any) => value != null && value !== "")
            : [];
          let funisFiltered;

          if (getFluxosValue.length !== 0) {
            funisFiltered = funis?.filter((y: any) => {
              if (getFluxosValue.length !== 0) {
                return !getFluxosValue.includes(y.id_funil);
              }
            });
          } else {
            funisFiltered = funis;
          }
          const selectedFunil = funilSelecionado?.find(
            (item) => item.id === fluxo.id,
          )?.id;

          const valuesFunil =
            defaultValues?.funil_campo_personalizado?.split(",");

          const etapas: any = etapasFluxos.filter(
            (step: any) => valuesFunil && step.grupo_etapa_funil === fluxo.id,
          );

          const etapaVisFunil =
            defaultValues?.etapasEsconder_campo_personalizado?.split(",");

          const etapaEditFunil =
            defaultValues?.etapasEditar_campo_personalizado?.split(",");

          let t: Record<string, any[]> = {};
          let y: Record<string, any[]> = {};

          if (valuesFunil) {
            t[fluxo.id] = etapas
              .filter((a: any) => etapaVisFunil?.includes(a.id_etapa_funil))
              .map((a: any) => a.id_etapa_funil)
              .join(",");

            y[fluxo.id] = etapas
              .filter((a: any) => etapaEditFunil?.includes(a.id_etapa_funil))
              .map((a: any) => a.id_etapa_funil)
              .join(",");
          }
          const visStepFlux = t[Number(fluxo.id)] ?? [];
          const editStepFlux = y[Number(fluxo.id)] ?? [];

          return (
            <div
              key={`fluxo-${index}`}
              className="px-3 items-center gap-2 flex mt-2"
            >
              {fluxos.length > 1 &&
                (index !== 0 ? (
                  <button
                    type="button"
                    className="text-danger text-sm"
                    onClick={() => removerFluxo(fluxo.id)}
                  >
                    <Trash2 />
                  </button>
                ) : (
                  <span className="px-3"></span>
                ))}

              <InputGroup className="w-full mb-0">
                <InputSelectComponent
                  name={`funil_campo_personalizado[${index}]`}
                  label={index === 0 ? `Fluxos` : ""}
                  formulario={form}
                  options={funis
                    .sort((a: any, b: any) =>
                      a.titulo_funil.localeCompare(b.titulo_funil, undefined, {
                        numeric: true,
                      }),
                    )
                    .map((etapa: any) => ({
                      label: etapa.titulo_funil,
                      value: etapa.id_funil,
                    }))}
                  defaultValue={valuesFunil && fluxos[index].id}
                  onChange={(value: any) =>
                    handleFunilChange(index, value.value)
                  }
                />

                <InputSelectComponent
                  name={`etapasEditar_campo_personalizado[${fluxo.id}]`}
                  label={index === 0 ? "Etapas a editar o campo" : ""}
                  formulario={form}
                  options={
                    selectedFunil
                      ? [
                          { value: "*", label: "Todos" },
                          ...etapasFluxos
                            .filter(
                              (step: any) =>
                                step.grupo_etapa_funil === selectedFunil,
                            )
                            .map((etapa: any) => ({
                              label: etapa.titulo_etapa_funil,
                              value: etapa.id_etapa_funil,
                            })),
                        ]
                      : []
                  }
                  isMulti
                  defaultValue={etapaEditFunil && editStepFlux}
                />

                <InputSelectComponent
                  name={`etapasEsconder_campo_personalizado[${fluxo.id}]`}
                  label={index === 0 ? "Etapas poder Visualizar o campo" : ""}
                  formulario={form}
                  options={
                    selectedFunil
                      ? [
                          { value: "*", label: "Todos" },
                          ...etapasFluxos
                            .filter(
                              (step: any) =>
                                step.grupo_etapa_funil === selectedFunil,
                            )
                            .map((etapa: any) => ({
                              label: etapa.titulo_etapa_funil,
                              value: etapa.id_etapa_funil,
                            })),
                        ]
                      : []
                  }
                  isMulti
                  defaultValue={
                    defaultValues["etapasEsconder_campo_personalizado"] &&
                    visStepFlux
                  }
                />
              </InputGroup>
            </div>
          );
        })}
    </>
  );
};

export default FluxosCampos;