import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { ICidade } from "@/requests/common/EstadosCidades/estadosCidades";
import { obterNegocios } from "@/requests/CRUD/Negocios/obterNegocios";
import { useAuth } from "@/src/contexts/authContext";
import { getDateBrasil, GetForm } from "@/utils";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";

export default function FormFiltroConsultaRelatorioInstalacoes({
  onSubmitFunction,
  lojas,
  tiposNegocios,
  clientes,
  statusParcelas,
  usuarios,
  pendencias_card,
  estados,
  cidades,
}: 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 { usuario, perfil } = useAuth();
  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]);

  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(",") : String(valor),
      };
    }, {});
    filters.id_usuario =
      perfil?.visualiza_todos_contatos_perfil != "1" ? usuario?.id_usuario : "";
    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]"
      />
      <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={tiposNegocios?.map((tipoNegocio: any) => ({
          label: tipoNegocio?.nome_tipo_negocio,
          value: tipoNegocio?.id_tipo_negocio,
        }))}
        formulario={form}
        width="flex-1 min-w-[170px]"
        isMulti
      />
      <InputSelectComponent
        name="linha_pendencia_atual_filtro"
        label="Pendência Atual"
        options={pendencias_card?.map((pendencia: any) => ({
          value: pendencia.id_pendencia,
          label: pendencia.nome_pendencia,
        }))}
        formulario={form}
        skipEffect
        removeDocumentBody
        textSize="text-sm"
        labelSize="text-md"
        width="flex-1 min-w-[170px]"
        menuPositionFixed
        isMulti
      />
      <InputSelectComponent
        formulario={form}
        name="estado_instalacao_filtro"
        textSize="text-sm"
        labelSize="text-md"
        width="flex-1 min-w-[170px]"
        options={estados.map((estado: any) => ({
          ...estado,
          label: `${estado.uf_estado} - ${estado.nome_estado}`,
          value: `${estado.uf_estado}`,
        }))}
        label="Estado Instalação"
        removeDocumentBody
        onChange={(e: any) => setEstadoInstalacaoSelecionado(e.value)}
        menuPositionFixed
      />
      <InputSelectComponent
        formulario={form}
        textSize="text-sm"
        labelSize="text-md"
        width="flex-1 min-w-[170px]"
        name="cidade_instalacao_filtro"
        removeDocumentBody
        isMulti
        options={cidades
          ?.filter(
            (cidade: any) =>
              cidade.estado_cidade ==
              estados.find(
                (estado: any) =>
                  estado.uf_estado == estadoInstalacaoSelecionado,
              )?.id_estado,
          )
          ?.map((cidade: ICidade) => ({
            label: cidade.nome_cidade,
            value: cidade.nome_cidade,
          }))}
        label="Cidade Instalação"
        menuPositionFixed
      />
      <Input
        name="bairro_coleta"
        label="Bairro da Instalação"
        formulario={form}
        width="flex-1 min-w-[170px]"
      />
      <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(), hoje.getMonth(), 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(), 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="flex flex-row gap-3 text-base pt-2">
            <strong>Data Instalacao</strong>
            <Button
              type="button"
              className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
              onClick={(e: any) => {
                e.stopPropagation();
                handleSweetAlert({
                  icon: "info",
                  title: "Atenção!!",
                  showDenyButton: false,
                  confirmButtonText: "Ok",
                  html: `
                    <div class="flex flex-col gap-2">
                      Quando deixado vazio o intervalo da "Data Instalação", será mostrado todos os projetos que não foram agendado a instalação.
                    </div>
                  `,
                });
              }}
            >
              <Info />
            </Button>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="dataI_instalacao_filtro"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear(), hoje.getMonth(), 1),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="dataF_instalacao_filtro"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear(), hoje.getMonth() + 3, 0),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
          </div>
        </div>
        <div className="flex flex-col gap-2 flex-1 min-w-[380px]">
          <div className="flex flex-row gap-3 text-base pt-2">
            <strong>Data Conclusão da Instalacao</strong>
            <Button
              type="button"
              className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
              onClick={(e: any) => {
                e.stopPropagation();
                handleSweetAlert({
                  icon: "info",
                  title: "Atenção!!",
                  showDenyButton: false,
                  confirmButtonText: "Ok",
                  html: `
                    <div class="flex flex-col gap-2">
                      Quando informado  o intervalo da "Data Instalação" e deixado vazio o intervalo da "Data Conclusão da Instalação", será mostrado todos os projetos que foram agendado a instalação mas ainda não foram finalizadas.
                    </div>
                  `,
                });
              }}
            >
              <Info />
            </Button>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="dataI_conclusao_instalacao_filtro"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear(), hoje.getMonth(), 1),
                "fr-CA",
              )}
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="dataF_conclusao_instalacao_filtro"
              formulario={form}
              type="date"
              width="flex-1"
              defaultValue={getDateBrasil(
                undefined,
                new Date(hoje.getFullYear(), hoje.getMonth() + 3, 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>Valor Total do Serviço</strong>
          </div>
          <div className="flex flex-row gap-2">
            <Input
              label="De"
              name="min_valor_obra_servico"
              formulario={form}
              mascara="numero"
              width="flex-1"
              // width="w-[100%]"
            />
            <Input
              label="Até"
              name="max_valor_obra_servico"
              formulario={form}
              mascara="numero"
              width="flex-1"
              // width="w-[100%]"
            />
          </div>
        </div>
      </div>
      <div className="w-full flex flex-row-reverse">
        <Button loading={isLoading}>Filtrar</Button>
      </div>
    </form>
  );
}