import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";
import { Trash2 } from "lucide-react";
import { useEffect } from "react";

const FluxoCampoPersonalizado = ({
  fluxo,
  indexFluxo,
  removerFluxo,
  tipoNegocio,
  fluxos,
  setFluxos,
  funis,
  etapasFluxos,
  setHandleSubmits,
}: any) => {
  const { handleSubmit, ...formFluxoCampoPersonalizado } = GetForm();

  useEffect(() => {
    setHandleSubmits((prev: any) => {
      const newHandleSubmits = [...prev];
      newHandleSubmits.splice(indexFluxo, 1, handleSubmit);
      return newHandleSubmits;
    });
  }, [handleSubmit]);

  return (
    <div key={indexFluxo} className="flex flex-row gap-2">
      {fluxos.length > 1 &&
        (indexFluxo > 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={`fluxo_etapas_campo_personalizado-${indexFluxo}`}
          label={indexFluxo === 0 ? `Fluxos` : ""}
          formulario={formFluxoCampoPersonalizado}
          options={[
            { label: "Todos Fluxos", value: "*" },
            ...funis
              .filter((funil: any) => {
                const tipoNegocioNormalizado: { value: string }[] = (() => {
                  if (!tipoNegocio) return [];
                  if (typeof tipoNegocio === "string") return [{ value: tipoNegocio }];
                  if (Array.isArray(tipoNegocio)) return tipoNegocio;
                  return [{ value: String(tipoNegocio) }];
                })();

                const isWildcard =
                  tipoNegocio === "*" ||
                  tipoNegocioNormalizado.some((a) => a.value === "*");

                if (isWildcard) return true;

                const tiposPermitidos = tipoNegocioNormalizado.map((t) => String(t.value));
                if (funil.tipo_negocio_funil === "*") return true
                const hasAnyValue = funil.tipo_negocio_funil
                  .split(",")
                  .some((tipo: string) => tiposPermitidos.includes(tipo.trim()));

                return funil.id_funil != "0" && hasAnyValue;
              })
              ?.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={fluxos?.[indexFluxo]?.fluxo_etapas_campo_personalizado}
          onChange={(e: any) => {
            setFluxos((prev: any) => {
              const newFluxos = [...prev];
              newFluxos.splice(indexFluxo, 1, {
                ...prev[indexFluxo],
                fluxo_etapas_campo_personalizado: e.value,
                editar_etapas_campo_personalizado: e.value == "*" ? "*" : "",
                visualizar_etapas_campo_personalizado:
                  e.value == "*" ? "*" : "",
              });
              return newFluxos;
            });
          }}
          required
          error="Informe o Fluxo"
        />

        <InputSelectComponent
          name={`editar_etapas_campo_personalizado-${indexFluxo}`}
          label={indexFluxo === 0 ? "Etapas a editar o campo" : ""}
          formulario={formFluxoCampoPersonalizado}
          options={
            fluxos?.[indexFluxo]?.fluxo_etapas_campo_personalizado
              ? [
                { value: "*", label: "Todos" },
                ...etapasFluxos
                  ?.filter((step: any) =>
                    fluxos?.[indexFluxo]?.fluxo_etapas_campo_personalizado ==
                      "*"
                      ? true
                      : step.grupo_etapa_funil ===
                      fluxos?.[indexFluxo]?.fluxo_etapas_campo_personalizado
                  )
                  ?.sort(
                    (a: any, b: any) =>
                      a.index_etapa_funil - b.index_etapa_funil
                  )
                  ?.map((etapa: any) => ({
                    label: etapa.titulo_etapa_funil,
                    value: etapa.id_etapa_funil,
                  })),
              ]
              : []
          }
          isMulti
          defaultValue={fluxos?.[indexFluxo]?.editar_etapas_campo_personalizado}
          onChange={(e: any) => {
            setFluxos((prev: any) => {
              const newFluxos = [...prev];
              newFluxos.splice(indexFluxo, 1, {
                ...prev[indexFluxo],
                editar_etapas_campo_personalizado:
                  e && e.length > 0
                    ? e.map((val: any) => val.value)?.join(",")
                    : "",
              });
              return newFluxos;
            });
          }}
        />

        <InputSelectComponent
          name={`visualizar_etapas_campo_personalizado-${indexFluxo}`}
          label={
            indexFluxo === 0 ? "Etapas onde pode-se Visualizar o campo" : ""
          }
          formulario={formFluxoCampoPersonalizado}
          options={
            fluxos?.[indexFluxo]?.fluxo_etapas_campo_personalizado
              ? [
                { value: "*", label: "Todos" },
                ...etapasFluxos
                  ?.filter(
                    (step: any) =>
                      step.grupo_etapa_funil ===
                      fluxos?.[indexFluxo]?.fluxo_etapas_campo_personalizado
                  )
                  ?.sort(
                    (a: any, b: any) =>
                      a.index_etapa_funil - b.index_etapa_funil
                  )
                  ?.map((etapa: any) => ({
                    label: etapa.titulo_etapa_funil,
                    value: etapa.id_etapa_funil,
                  })),
              ]
              : []
          }
          isMulti
          defaultValue={
            fluxos?.[indexFluxo]?.visualizar_etapas_campo_personalizado
          }
          onChange={(e: any) => {
            setFluxos((prev: any) => {
              const newFluxos = [...prev];
              newFluxos.splice(indexFluxo, 1, {
                ...prev[indexFluxo],
                visualizar_etapas_campo_personalizado:
                  e && e.length > 0
                    ? e.map((val: any) => val.value)?.join(",")
                    : "",
              });
              return newFluxos;
            });
          }}
        />
      </InputGroup>
    </div>
  );
};

export default FluxoCampoPersonalizado;