import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarEtiquetas } from "@/requests/CRM/kanban";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { IValueLabel } from "@/types/formInterfaces";
import { GetForm } from "@/utils";
import { parseISO } from "date-fns";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
interface ICliente {
  nome_cliente: string;
  id_cliente: string;
}

const FormularioFiltroFluxoPerdas = () => {
  const { handleSubmit, ...form } = GetForm();

  const [filtroEstado, setFiltroEstado] = useState<any>([]);
  const [filtroClassificacao, setFiltroClassificacao] = useState<any>([]);
  const [estadoSelecionado, setEstadoSelecionado] = useState<any>();
  const {
    lists,
    funil,
    listarDadosKanban,
    locks,
    cidades,
    clientes,
    estadosFiltro,
    businessFilters,
    setBusinessFilters,
  } = useKanbanContext();
  const [allFilterData, setAllFilterData] = useState<any>([]);
  const [tipoNegocio, setTiposNegocio] = useState<any[]>([]);
  const [lojas, setLojas] = useState<any[]>([]);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [openItems, setOpenItems] = useState([]);

  const [selectedOption, setSelectedOption] = useState(
    businessFilters.ordenacao_filtro,
  );

  // useEffect(() => {

  // }, [allFilterData]);

  useEffect(() => {
    listarTiposNegocios().then((res) => setTiposNegocio(res));
  }, []);

  useEffect(() => {
    setFiltroEstado([
      { value: "*", label: "Todos" },
      ...estadosFiltro.map((estado: any) => ({
        label: `${estado.uf_estado}`,
        value: `${estado.uf_estado}`,
      })),
    ]);
    listarClassificacoes().then((classificacao) =>
      setFiltroClassificacao([
        { label: "Todos", value: "" },
        ...classificacao
          .filter((e: any) => e.status_classificacao == 1)
          .map((y: any) => ({
            label: `${y.nome_classificacao}`,
            value: `${y.id_classificacao}`,
          })),
      ]),
    );

    Promise.all([
      listarLojas(session.id_usuario),
      listarUsuarios(session.id_loja_usuario),
      listarEtiquetas(),
    ]).then(([lojasRes, usuariosRes, etiquetasRes]) => {
      setAllFilterData((prevData: any) => ({
        ...prevData,
        Usuarios: usuariosRes,
        Etiquetas: etiquetasRes,
        Lojas: lojasRes,
      }));
    });

    // setEstadoSelecionado(filtrosSelecionados?.estado_contato_filtro);
  }, []);

  const criteriosOrdenacao = [
    { label: "Data do Cadastro Crescente", value: 0 },
    { label: "Data do Cadastro Descrescente", value: 1 },
    { label: "Data da Atualização Crescente", value: 2 },
    { label: "Data da Atualização Descrescente", value: 3 },
    { label: "Ordem Alfabética", value: 4 },
  ];

  //Array de filtros
  const filterGroups = [
    {
      title: "Potencia da Proposta Aprovada",
      inputs: [
        {
          name: "min_potencia_filtro",
          label: "De",
          defaultValue: businessFilters?.min_potencia_filtro,
        },
        {
          name: "max_potencia_filtro",
          label: "Até",
          defaultValue: businessFilters?.max_potencia_filtro,
        },
      ],
    },
    {
      title: "Valor da Proposta Aprovada",
      inputs: [
        {
          name: "min_valor_filtro",
          label: "De",
          defaultValue: businessFilters?.min_valor_filtro,
        },
        {
          name: "max_valor_filtro",
          label: "Até",
          defaultValue: businessFilters?.max_valor_filtro,
        },
      ],
    },
    {
      title: "Consumo",
      inputs: [
        {
          name: "min_consumo_filtro",
          label: "De",
          defaultValue: businessFilters?.min_consumo_filtro,
        },
        {
          name: "max_consumo_filtro",
          label: "Até",
          defaultValue: businessFilters?.max_consumo_filtro,
        },
      ],
    },
  ];

  const handleCheckboxChange = (value: any) => {
    if (selectedOption === value) {
      setSelectedOption(null);
    } else {
      setSelectedOption(value);
    }
  };

  const currentDate = new Date().toISOString().split("T")[0];

  const submitFilters = (values: any) => {
    var dtI_Negocio = parseISO(values["dataI_negocio_filtro"]);
    var dtF_Negocio = parseISO(values["dataF_negocio_filtro"]);
    var dtI_Proposta = parseISO(values["dataI_proposta_filtro"]);
    var dtF_Proposta = parseISO(values["dataF_proposta_filtro"]);
    var dtI_cancelamento_Negocio = parseISO(
      values["dataI_cancelamento_negocio_filtro"],
    );
    var dtF_cancelamento_Negocio = parseISO(
      values["dataF_cancelamento_negocio_filtro"],
    );

    if (
      dtI_Negocio > dtF_Negocio ||
      dtI_Proposta > dtF_Proposta ||
      dtI_cancelamento_Negocio > dtF_cancelamento_Negocio
    ) {
      toast.warning(`Data início não pode ser maior que data fim!`);
      return;
    }

    var vlrI_Potencia = +values["min_potencia_filtro"];
    var vlrF_Potencia = +values["max_potencia_filtro"];
    if (vlrI_Potencia && vlrF_Potencia && vlrI_Potencia > vlrF_Potencia) {
      toast.warning(`Potência início não pode ser maior que potência fim!`);
      return;
    }

    var vlrI_Valor = +values["min_valor_filtro"];
    var vlrF_Valor = +values["max_valor_filtro"];
    if (vlrI_Valor && vlrF_Valor && vlrI_Valor > vlrF_Valor) {
      toast.warning(`Valor início não pode ser maior que valor fim!`);
      return;
    }

    var vlrI_Consumo = +values["min_consumo_filtro"];
    var vlrF_Consumo = +values["max_consumo_filtro"];
    if (vlrI_Consumo && vlrF_Consumo && vlrI_Consumo > vlrF_Consumo) {
      toast.warning(`Consumo início não pode ser maior que consumo fim!`);
      return;
    }

    setBusinessFilters(values);

    toast.success("Filtros aplicados com sucesso!");
  };

  const handleClearFilters = () => {
    const filtrosLimpos = Object.keys(businessFilters).reduce(
      (acc: any, key) => {
        acc[key] = Array.isArray(businessFilters[key]) ? [] : ""; // Limpa arrays e strings
        form.setValue(key, acc[key]);

        return acc;
      },
      {},
    );

    form.reload();

    setBusinessFilters(filtrosLimpos);

    toast.success("Filtros limpos com sucesso!");
  };

  useEffect(() => {
    const itemsToOpen: any = [];

    // Verifique se "item-1" tem algum valor preenchido nos filtros
    if (
      businessFilters &&
      (businessFilters["numNegocio_filtro"] ||
        businessFilters["etapa1_filtro"] ||
        businessFilters["etiqueta_filtro"] ||
        businessFilters["urgencia_filtro"] ||
        businessFilters["cliente_filtro"]?.length > 0 ||
        businessFilters["tipo_negocio_filtro"]?.length > 0 ||
        businessFilters["loja_filtro"]?.length > 0 ||
        businessFilters["pendencia_filtro"]?.length > 0)
    ) {
      itemsToOpen.push("item-1");
    }

    // Verifique se "item-2" tem algum valor preenchido nos filtros
    if (
      businessFilters &&
      (businessFilters["estado_contato_filtro"] ||
        businessFilters["cidade_contato_filtro"]?.length > 0)
    ) {
      itemsToOpen.push("item-2");
    }

    // Verifique se "item-3" (Responsáveis) tem algum valor preenchido
    if (
      businessFilters &&
      (businessFilters["gerente_filtro"]?.length > 0 ||
        businessFilters["responsavel_filtro"]?.length > 0 ||
        businessFilters["vendedor_filtro"]?.length > 0 ||
        businessFilters["preVendedor_filtro"]?.length > 0 ||
        businessFilters["tecnico_filtro"]?.length > 0 ||
        businessFilters["instalador_filtro"]?.length > 0)
    ) {
      itemsToOpen.push("item-3");
    }

    // Verifique se "item-4" (Datas) tem algum valor preenchido
    if (
      businessFilters &&
      (businessFilters["dataI_negocio_filtro"] ||
        businessFilters["dataF_negocio_filtro"] ||
        businessFilters["dataI_proposta_filtro"] ||
        businessFilters["dataF_proposta_filtro"])
    ) {
      itemsToOpen.push("item-4");
    }

    // Verifique se "item-5" (Valores) tem algum valor preenchido
    if (
      filterGroups.some((group) =>
        group.inputs.some(
          (input) => businessFilters && businessFilters[input.name],
        ),
      )
    ) {
      itemsToOpen.push("item-5");
    }

    setOpenItems(itemsToOpen);
  }, []);

  return (
    <form key={form.key} onSubmit={handleSubmit(submitFilters)}>
      {allFilterData.length == undefined ? (
        <>
          <div className="w-full min-w-75 flex gap-4">
            <Button className="flex-1 bg-secondaryMenu">Aplicar</Button>
            <Button
              onClick={handleClearFilters}
              type="button"
              className="flex-1 bg-danger "
            >
              Limpar Filtros
            </Button>
          </div>
          <div
            className="overflow-y-auto mt-5 pr-2 pb-5"
            style={{ maxHeight: "calc(100vh - 140px)" }}
          >
            <InputGroup>
              <Input
                name="numNegocio_filtro"
                label="Nº do Negócio"
                textSize="text-sm"
                labelSize="text-md"
                formulario={form}
                mascara="numerico"
                defaultValue={
                  businessFilters && businessFilters["numNegocio_filtro"]
                }
              />
              {/* <InputSelectComponent
                formulario={form}
                skipEffect
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                removeDocumentBody
                placeholder="Etapa"
                name="etapa1_filtro"
                defaultValue={businessFilters && businessFilters?.etapa1_filtro}
                options={lists?.map((etapa: any) => ({
                  label: etapa.title,
                  value: etapa.id,
                }))}
                label="Na Etapa"
              /> */}
            </InputGroup>
            <InputGroup>
              {/* <InputSelectComponent
                formulario={form}
                skipEffect
                textSize="text-sm"
                width="w-[100%]"
                labelSize="text-md"
                removeDocumentBody
                placeholder="Etiqueta"
                name="etiqueta_filtro"
                defaultValue={
                  businessFilters && businessFilters?.etiqueta_filtro
                }
                options={allFilterData["Etiquetas"]?.map((etiqueta: any) => ({
                  label: etiqueta.titulo_etiqueta_kanban,
                  value: etiqueta.id_etiqueta_kanban,
                }))}
                label="Com Etiqueta"
              /> */}
              <InputSelectComponent
                formulario={form}
                removeDocumentBody
                labelSize="text-md"
                textSize="text-sm"
                placeholder="Urgencia"
                skipEffect
                width="w-[100%]"
                name="urgencia_filtro"
                defaultValue={
                  businessFilters && businessFilters?.urgencia_filtro
                }
                options={[
                  { value: "*", label: "Nenhuma" },
                  { value: "1", label: "Alta" },
                  { value: "2", label: "Média" },
                  { value: "3", label: "Baixa" },
                ]}
                label="Com Urgência"
              />
            </InputGroup>
            <InputGroup>
              <InputSelectComponent
                name="cliente_filtro"
                label="Cliente"
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                removeDocumentBody
                skipEffect
                isMulti
                formulario={form}
                defaultValue={
                  businessFilters && businessFilters.cliente_filtro?.join(",")
                }
                options={clientes?.map<IValueLabel>((cliente: ICliente) => ({
                  label: cliente.nome_cliente,
                  value: cliente.id_cliente,
                }))}
              />
              <InputSelectComponent
                name="tipo_negocio_filtro"
                label="Tipo de Negócio"
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                removeDocumentBody
                skipEffect
                isMulti
                defaultValue={
                  businessFilters &&
                  businessFilters.tipo_negocio_filtro?.join(",")
                }
                formulario={form}
                options={[
                  ...tipoNegocio.map((e: any) => ({
                    value: e.id_tipo_negocio,
                    label: e.nome_tipo_negocio,
                  })),
                ]}
              />
            </InputGroup>
            <InputGroup>
              <InputSelectComponent
                formulario={form}
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                skipEffect
                removeDocumentBody
                isMulti
                name="loja_filtro"
                defaultValue={
                  businessFilters && businessFilters.loja_filtro?.join(",")
                }
                options={allFilterData["Lojas"]?.map((loja: any) => ({
                  label: loja.nome_loja,
                  value: loja.id_loja,
                }))}
                label="Loja"
              />
              {/* <InputSelectComponent
                formulario={form}
                skipEffect
                removeDocumentBody
                name="pendencia_filtro"
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                isMulti
                defaultValue={
                  businessFilters && businessFilters.pendencia_filtro?.join(",")
                }
                options={locks?.map<IValueLabel>((lock: any) => ({
                  value: lock.id_lock,
                  label: lock.nome_lock,
                }))}
                label="Pendências de Cadastros"
              /> */}
            </InputGroup>
            <div className="text-base py-2">
              <strong>Período da Perda</strong>
            </div>
            <InputGroup>
              <Input
                label="De"
                name="dataI_cancelamento_negocio_filtro"
                formulario={form}
                type="date"
                width="w-[100%]"
                defaultValue={
                  businessFilters &&
                  businessFilters["dataI_cancelamento_negocio_filtro"]
                }
              />
              <Input
                label="Até"
                name="dataF_cancelamento_negocio_filtro"
                formulario={form}
                type="date"
                width="w-[100%]"
                defaultValue={
                  businessFilters &&
                  businessFilters["dataF_cancelamento_negocio_filtro"]
                }
              />
            </InputGroup>
            <InputGroup>
              <InputSelectComponent
                formulario={form}
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                skipEffect
                isMulti
                removeDocumentBody
                name="gerente_filtro"
                defaultValue={
                  businessFilters && businessFilters.gerente_filtro?.join(",")
                }
                options={[
                  ...allFilterData["Usuarios"]
                    ?.filter(
                      (user: any) =>
                        user.cargo_perfil == "1" || user.cargo_perfil == "4",
                    )
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                label="Gerente"
                menuPositionFixed
              />
              <InputSelectComponent
                formulario={form}
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                skipEffect
                isMulti
                removeDocumentBody
                name="responsavel_filtro"
                defaultValue={
                  businessFilters &&
                  businessFilters.responsavel_filtro?.join(",")
                }
                options={[
                  ...allFilterData["Usuarios"]
                    ?.filter(
                      (user: any) =>
                        user.cargo_perfil == "1" || user.cargo_perfil == "4",
                    )
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                label="Administrador"
                menuPositionFixed
              />
            </InputGroup>
            <InputGroup>
              <InputSelectComponent
                formulario={form}
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                isMulti
                skipEffect
                removeDocumentBody
                name="vendedor_filtro"
                defaultValue={
                  businessFilters && businessFilters.vendedor_filtro?.join(",")
                }
                options={[
                  ...allFilterData["Usuarios"]
                    ?.filter((user: any) => user.cargo_perfil == "2")
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                label="Vendedor"
                menuPositionFixed
              />
              <InputSelectComponent
                formulario={form}
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                isMulti
                removeDocumentBody
                skipEffect
                name="preVendedor_filtro"
                defaultValue={
                  businessFilters &&
                  businessFilters.preVendedor_filtro?.join(",")
                }
                options={[
                  ...allFilterData["Usuarios"]
                    ?.filter((user: any) => user.cargo_perfil == "3")
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                label="Pré-Vendedor"
                menuPositionFixed
              />
            </InputGroup>
            <InputGroup>
              <InputSelectComponent
                formulario={form}
                isMulti
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                removeDocumentBody
                skipEffect
                name="tecnico_filtro"
                defaultValue={
                  businessFilters && businessFilters.tecnico_filtro?.join(",")
                }
                options={[
                  ...allFilterData["Usuarios"]
                    ?.filter((user: any) => user.cargo_perfil == "5")
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                label="Técnico"
                menuPositionFixed
              />
              <InputSelectComponent
                formulario={form}
                isMulti
                textSize="text-sm"
                labelSize="text-md"
                width="w-[100%]"
                removeDocumentBody
                skipEffect
                name="instalador_filtro"
                defaultValue={
                  businessFilters &&
                  businessFilters.instalador_filtro?.join(",")
                }
                options={[
                  ...allFilterData["Usuarios"]
                    ?.filter((user: any) => user.cargo_perfil == "6")
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                label="Instalador"
                menuPositionFixed
              />
            </InputGroup>
          </div>
        </>
      ) : (
        <div className="flex items-center justify-center h-[700px] py-2 px-5">
          <LoaderSun size={20} />
        </div>
      )}
    </form>
  );
};

export default FormularioFiltroFluxoPerdas;