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 { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";

export default function FormFiltroConsultaParcelas({
  onSubmitFunction,
  lojas,
  tiposNegocios,
  clientes,
  statusParcelas,
}: any) {
  const [negocios, setNegocios] = useState<any[]>([]);
  const [clienteSelecionado, setClienteSelecionado] = useState<any>();
  const [isLoading, setIsLoading] = useState(false);

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

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

  const onSubmitFiltroConsultaParcelas = (data: any) => {
    setIsLoading(true);
    const filters = data;
    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"
      />
      <InputSelectComponent
        name="cliente_filtro"
        label="Cliente"
        options={clientes?.map((cliente: any) => ({
          label: cliente?.nome_cliente,
          value: cliente?.id_cliente,
        }))}
        formulario={form}
        width="flex-1"
        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="coleta_filtro"
        label="Projeto"
        mascara="numerico"
        formulario={form}
        width="flex-1"
      />
      {/* <InputSelectComponent
        name="coleta_filtro"
        label="Projeto"
        formulario={form}
        width={"flex-1"}
        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"
      />
      <InputSelectComponent
        name="statusParcela_filtro"
        label="Status Parcela"
        options={statusParcelas}
        formulario={form}
        width="flex-1"
      />
      <div className="flex flex-col gap-2 w-full">
        <div className="text-base py-2">
          <strong>Data Vencimento</strong>
        </div>
        <div className="flex flex-row gap-2">
          <Input
            label="De"
            name="dataI_vencimento_parcelamento_filtro"
            formulario={form}
            type="date"
            width="flex-1"
            // width="w-[100%]"
          />
          <Input
            label="Até"
            name="dataF_vencimento_parcelamento_filtro"
            formulario={form}
            type="date"
            width="flex-1"
            // width="w-[100%]"
          />
        </div>
      </div>
      <div className="w-full flex flex-row-reverse">
        <Button loading={isLoading}>Filtrar</Button>
      </div>
    </form>
  );
}