import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import * as yup from "yup";

import { listarUsuarios } from "@/requests/CRM/Dashboard/listarDashboard";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarContatos } from "@/requests/CRUD/Cliente/listarClientes";
import { useAuth } from "@/src/contexts/authContext";
import { IValueLabel } from "@/types/formInterfaces";
import InputGroup from "../Forms/InputGroup";

const NewBusiness = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  hasGerarProposta,
  vendedor,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [clientes, setClientes] = useState([]);
  const [vendedores, setVendedores] = useState<any>([]);
  const [simultaneidade, setSimultaneidade] = useState<IValueLabel[]>([]);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  useEffect(() => {
    listarUsuarios().then((res) =>
      setVendedores(
        res
          .filter((e: any) => e.cargo_perfil == 2)
          .map((vendedor: any) => ({
            label: `${vendedor.nome_usuario}`,
            value: `${vendedor.id_usuario}`,
          }))
      )
    );
    listarClassificacoes().then((res) =>
      setSimultaneidade(
        res
          .filter((e: any) => e.status_classificacao == 1)
          .map((simultaneidade: any) => ({
            label: `${simultaneidade.nome_classificacao}`,
            value: `${simultaneidade.id_classificacao}`,
          }))
      )
    );
    const buscarClientes = async () => {
      listarContatos().then((res: any) => {
        setClientes(
          res.map((cliente: any) => ({
            value: cliente.id_cliente,
            label: cliente.nome_cliente,
          }))
        );
      });
    };
    buscarClientes();
  }, []);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        <div className="flex flex-col gap-8 p-6 max-w-[600px] mx-auto">
          <InputGroup className="flex flex-col gap-6">
            <InputSelectComponent
              formulario={form}
              label="Cliente"
              name="cliente"
              options={clientes}
              required
              error={"Preencha o Cliente!"}
              className="w-full"
            />
            <Input
              formulario={form}
              label="Unidade Consumidora (UC)"
              name="uc_negocio"
              type="text"
              mascara="numerico"
              className="w-full h-12 p-3 text-lg"
            />
          </InputGroup>
          <Input
            formulario={form}
            label="Nome do negócio"
            name="nome_negocio"
            required
            error={"Preencha o Negócio!"}
            className="w-full h-12 p-3 text-lg"
          />
          {!vendedor && (
            <InputSelectComponent
              formulario={form}
              label="Vendedor"
              name="vendedor_negocio"
              options={vendedores}
              required
              error={"Preencha o Vendedor!"}
              className="w-full"
            />
          )}
          <InputSelectComponent
            formulario={form}
            label="Perfil de Consumo"
            name="perfil_consumo_coleta"
            options={simultaneidade}
            required
            error={"Preencha o Perfil de Consumo!"}
            className="w-full"
          />
          <Input
            formulario={form}
            label="Observação do negócio"
            name="obs_negocio"
            type="textarea"
            autoComplete="off"
            className="w-full h-32 p-3 text-lg"
          />
          {children}
        </div>
      </form>
    </>
  );
};

export default NewBusiness;