"use client";

import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { buscaCep } from "@/services/buscaCep";
import { GetForm } from "@/utils";
import { useState } from "react";
import { toast } from "react-toastify";
import * as yup from "yup";

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

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

  const [cep, setCep] = useState<string>(defaultValues?.cep_fabricante);
  const [bairro, setBairro] = useState<string>(
    defaultValues?.bairro_fabricante,
  );
  const [logradouro, setLogradouro] = useState<string>(
    defaultValues?.rua_fabricante,
  );
  const [estadoSelecionado, setEstadoSelecionado] = useState<string>(
    defaultValues?.estado_fabricante,
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    defaultValues?.cidade_fabricante,
  );
  const [loadingCep, setLoadingCep] = useState(false);

  const handleCEPChange = async (event: any) => {
    const cep = event;
    setCep(cep);

    if (cep && cep.length === 9) {
      setLoadingCep(true);
      const formataCep = cep.replace("-", "");
      const enderecoInfo = await buscaCep(formataCep);

      form.setValue("bairro_fabricante", enderecoInfo!.bairro);
      form.setValue("rua_fabricante", enderecoInfo!.rua);
      form.setValue("estado_fabricante", enderecoInfo!.estado);
      form.setValue("cidade_fabricante", enderecoInfo!.cidade);
      setLoadingCep(false);

      setBairro(enderecoInfo!.bairro || "");
      setLogradouro(enderecoInfo!.rua || "");
      setCidadeSelecionada(enderecoInfo!.cidade);
      setEstadoSelecionado(enderecoInfo!.estado);
    }
  };

  function onSubmitFormFabricante(data: any) {
    if (data["telefone_fabricante"].length < 10) {
      toast.error("O telefone deve conter ao menos 10 dígitos.");
      return;
    }
    return onSubmitFunction({
      ...data,
      tipos_itens_fabricante: data.tipos_itens_fabricante.join(","),
    });
  }

  return (
    <form onSubmit={handleSubmit(onSubmitFormFabricante)} {...rest}>
      <InputGroup>
        <Input
          name="nome_fabricante"
          label="Nome"
          formulario={form}
          required
          error={"Preencha o Nome"}
          defaultValue={defaultValues && defaultValues["nome_fabricante"]}
          disabled={disabledFields?.some(
            (field: string) => field == "nome_fabricante",
          )}
        />
        <InputSelectComponent
          name="tipos_itens_fabricante"
          label="Tipos de Itens"
          formulario={form}
          options={[
            {
              value: "*",
              label: "Todos",
            },
            ...tiposItens?.map((tipoItens: any) => ({
              value: tipoItens.id_tipo_item,
              label: tipoItens.nome_tipo_item,
            })),
          ]}
          isMulti
          required
          error={"Informe ao menos um tipo"}
          defaultValue={
            defaultValues && defaultValues["tipos_itens_fabricante"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "tipos_itens_fabricante",
          )}
        />
        <Input
          name="cnpj_fabricante"
          label="CNPJ"
          formulario={form}
          mascara="cnpj"
          defaultValue={defaultValues && defaultValues["cnpj_fabricante"]}
          disabled={disabledFields?.some(
            (field: string) => field == "cnpj_fabricante",
          )}
        />
        <Input
          name="telefone_fabricante"
          label="Telefone"
          formulario={form}
          mascara="telefone"
          defaultValue={defaultValues && defaultValues["telefone_fabricante"]}
          disabled={disabledFields?.some(
            (field: string) => field == "telefone_fabricante",
          )}
        />
      </InputGroup>

      <InputGroup>
        <Input
          name="email_fabricante"
          label="E-mail"
          formulario={form}
          type="email"
          defaultValue={defaultValues && defaultValues["email_fabricante"]}
          disabled={disabledFields?.some(
            (field: string) => field == "email_fabricante",
          )}
        />
        <div className="w-full">
          {loadingCep && (
            <span className="text-xs text-gray-500 mt-1 block">
              Buscando endereço...
            </span>
          )}

          <Input
            formulario={form}
            label="CEP"
            name="cep_fabricante"
            autoComplete="off"
            mascara="cep"
            disabled={loadingCep}
            defaultValue={defaultValues && defaultValues["cep_fabricante"]}
            onBlur={(e) => handleCEPChange(e.target.value)}
          />
        </div>
        <Input
          formulario={form}
          label="Bairro"
          name="bairro_fabricante"
          autoComplete="off"
          defaultValue={defaultValues && defaultValues["bairro_fabricante"]}
          disabled={cep != "" && cep != "0" && bairro != ""}
          // defaultValue={endereco.bairro}
        />
        <Input
          formulario={form}
          label="Rua"
          name="rua_fabricante"
          // disabled={endereco.bloqueado}
          autoComplete="off"
          defaultValue={defaultValues && defaultValues["rua_fabricante"]}
          disabled={cep != "" && cep != "0" && logradouro != ""}
          // defaultValue={endereco.rua}
        />
      </InputGroup>

      <InputGroup>
        <Input
          formulario={form}
          label="Numero"
          mascara="numerico"
          name="nro_fabricante"
          autoComplete="off"
          defaultValue={defaultValues && defaultValues["nro_fabricante"]}
        />
        <Input
          formulario={form}
          name="cidade_fabricante"
          label="Cidade"
          mascara="letras"
          disabled={cep != "" && cep != "0" && cidadeSelecionada != ""}
          defaultValue={defaultValues && defaultValues["cidade_fabricante"]}
        />
        <Input
          formulario={form}
          name="estado_fabricante"
          label="Estado"
          mascara="letras"
          defaultValue={defaultValues && defaultValues["estado_fabricante"]}
          disabled={cep != "" && cep != "0" && estadoSelecionado != ""}
        />
      </InputGroup>
      {children}
    </form>
  );
};

export default FormFabricante;