import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { obterNegocios } from "@/requests/CRUD/Negocios/obterNegocios";
import { getDateBrasil, GetForm } from "@/utils";
import { useEffect, useState } from "react";

export default function FormFiltroConsultaOS({
  onSubmitFunction,
  lojas,
  tiposNegocios,
  clientes,
  statusOrdensServico,
  usuarios,
  pendencias,
  estados,
  cidades,
  isLoaded,
  linhasPendencias,
}: any) {
  const [negocios, setNegocios] = useState<any[]>([]);
  const [clienteSelecionado, setClienteSelecionado] = useState<any>();
  const [isLoading, setIsLoading] = useState(false);
  const [estadoInstalacaoSelecionado, setEstadoInstalacaoSelecionado] =
    useState<any>();
  const [hoje, setHoje] = useState(new Date());

  const [tiposNegociosFiltrados, setTiposNegociosFiltrados] = useState<any[]>([
    {
      value: "*",
      label: "Todos",
    },
  ]);

  const [
    pendenciasOptionsPelosTiposNegociosFiltrados,
    setPendenciasOptionsPelosTiposNegociosFiltrados,
  ] = useState<any[]>([]);

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

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

  useEffect(() => {
    setNegocios([]);
    if (clienteSelecionado?.id_cliente) {
      obterNegocios({
        id_cliente: clienteSelecionado?.id_cliente,
        // tipoNegocio_coleta: "1",
      }).then((res) => {
        setNegocios(res);
      });
    }
  }, [clienteSelecionado]);

  useEffect(() => {
    if (isLoaded) {
      setPendenciasOptionsPelosTiposNegociosFiltrados(
        tiposNegocios
          ?.filter((tipo: any) =>
            tiposNegociosFiltrados?.some(
              (tipoNegocioFiltrado) =>
                tipoNegocioFiltrado?.value == "*" ||
                tipo?.id_tipo_negocio == tipoNegocioFiltrado?.id_tipo_negocio,
            ),
          )
          ?.map((tipo: any) => {
            const linhaPendencias = linhasPendencias?.filter(
              (pendencias: any) =>
                pendencias?.codTipoNegocio_sequenciamento_pendencia ==
                tipo?.id_tipo_negocio,
            );
            return {
              label: tipo?.nome_tipo_negocio,
              options: linhaPendencias?.map(
                (pendenciaNaSequencia: any, indexPendencia: number) => {
                  const pendencia = pendencias?.find(
                    (pendencia: any) =>
                      pendencia?.id_pendencia ==
                      pendenciaNaSequencia?.codPendencia_sequenciamento_pendencia,
                  );
                  return {
                    ...pendencia,
                    value: pendencia?.id_pendencia,
                    label: pendencia?.nome_pendencia,
                  };
                },
              ),
            };
          }),
      );
    }
  }, [isLoaded, tiposNegociosFiltrados]);

  const onSubmitFiltroConsultaParcelas = (dataFilters: any) => {
    setIsLoading(true);
    const filters = Object.keys(dataFilters).reduce((acc: any, curr: any) => {
      const valor = dataFilters[curr];
      return {
        ...acc,
        [curr]: Array.isArray(valor)
          ? valor?.join(",") != "*"
            ? valor?.join(",")
            : ""
          : String(valor) == "true"
            ? 1
            : String(valor) == "false"
              ? 0
              : String(valor),
      };
    }, {});
    return onSubmitFunction(filters).finally(() => setIsLoading(false));
  };

  return (
    <form
      key={form.key}
      onSubmit={handleSubmit(onSubmitFiltroConsultaParcelas)}
      className="flex flex-row flex-wrap gap-2 pb-3"
    >
      <InputSelectComponent
        name="loja_filtro"
        label="Loja"
        options={lojas?.map((loja: any) => ({
          label: loja?.nome_loja,
          value: loja?.id_loja,
        }))}
        formulario={form}
        width="flex-1 min-w-[170px]"
      />
      <InputSelectComponent
        name="cliente_filtro"
        label="Cliente"
        options={clientes?.map((cliente: any) => ({
          label: `${cliente?.id_cliente}) ${cliente?.nome_cliente}`,
          value: cliente?.id_cliente,
        }))}
        formulario={form}
        width="flex-1 min-w-[170px]"
        onChange={(e: any) => {
          const cliente: any = clientes.find(
            (c: any) => c.id_cliente == e.value,
          );

          if (!cliente) {
            setClienteSelecionado(undefined);
            return;
          }

          setClienteSelecionado(cliente);
          form.setValue("coleta_filtro", "");
        }}
      />
      <Input
        name="numNegocio_filtro"
        label="Nº do Negócio"
        mascara="numerico"
        formulario={form}
        width="flex-1 min-w-[170px]"
      />
      <Input
        name="numOS_filtro"
        label="Nº da OS"
        mascara="numerico"
        formulario={form}
        width="flex-1 min-w-[170px]"
      />
      <InputSelectComponent
        formulario={form}
        isMulti
        textSize="text-sm"
        labelSize="text-md"
        width="flex-1 min-w-[170px]"
        removeDocumentBody
        skipEffect
        name="instalador_filtro"
        options={[
          { label: "Não Informado", value: "0" },
          ...usuarios
            ?.filter((user: any) => user.cargo_perfil == "6")
            ?.map((user: any) => ({
              label: user.nome_usuario,
              value: user.id_usuario,
            })),
        ]}
        label="Instalador"
        menuPositionFixed
      />
      {/* <InputSelectComponent
        name="coleta_filtro"
        label="Projeto"
        formulario={form}
        width={"flex-1 min-w-[170px]"}
        options={negocios.map((negocio: any) => ({
          value: negocio.id_coleta,
          label: `${negocio.id_coleta} - ${negocio.nome_negocio_coleta}`,
        }))}
        // required
        // error={"Informe o negócio!"}
        // defaultValue={usuario?.loja_padrao_usuario}
      /> */}

      <InputSelectComponent
        name="tipoNegocio_filtro"
        label="Tipo de Negócio"
        options={[
          {
            value: "*",
            label: "Todos",
          },
          ...tiposNegocios.map((e: any) => ({
            ...e,
            value: e.id_tipo_negocio,
            label: e.nome_tipo_negocio,
          })),
        ]}
        formulario={form}
        defaultValue={"*"}
        width="flex-1 min-w-[170px]"
        isMulti
        onChange={(e: any) => {
          setTiposNegociosFiltrados(e);
        }}
      />
      <InputSelectComponent
        name="linha_pendencia_atual_filtro"
        label="Pendência Atual"
        options={pendenciasOptionsPelosTiposNegociosFiltrados}
        formulario={form}
        skipEffect
        removeDocumentBody
        textSize="text-sm"
        labelSize="text-md"
        width="flex-1 min-w-[170px]"
        menuPositionFixed
        isMulti
      />
      <InputSelectComponent
        name="status_pvos_filtro"
        label="Status da OS"
        options={statusOrdensServico}
        formulario={form}
        skipEffect
        removeDocumentBody
        textSize="text-sm"
        labelSize="text-md"
        width="flex-1 min-w-[170px]"
        menuPositionFixed
        isMulti
      />
      <div className="flex flex-row gap-3 w-full flex-wrap">
        <div className="flex flex-col gap-2 flex-1 min-w-[380px]">
          <div className="text-base pt-2">
            <strong>Data do Projeto</strong>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="dataI_coleta"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear() - 1, 0, 1),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="dataF_coleta"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear() + 1, 0, 0),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
          </div>
        </div>

        <div className="flex flex-col gap-2 flex-1 min-w-[380px]">
          <div className="text-base pt-2">
            <strong>Data da Criação da OS</strong>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="dataI_criacao_os"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear(), hoje.getMonth() - 1, 1),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="dataF_criacao_os"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear(), hoje.getMonth() + 1, 0),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
          </div>
        </div>

        <div className="flex flex-col gap-2 flex-1 min-w-[380px]">
          <div className="text-base pt-2">
            <strong>Data da Baixa da OS</strong>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="dataI_baixa_os"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear() - 1, 0, 1),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="dataF_baixa_os"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear() + 1, 0, 0),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
          </div>
        </div>

        <div className="flex flex-col gap-2 flex-1 min-w-[380px]">
          <div className="text-base pt-2">
            <strong>Data da Validação da OS</strong>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="dataI_validacao_os"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear() - 1, 0, 1),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="dataF_validacao_os"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear() + 1, 0, 0),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
          </div>
        </div>
      </div>

      <div className="w-full flex flex-row-reverse">
        <Button loading={isLoading}>Filtrar</Button>
      </div>
    </form>
  );
}