import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  listarCidades,
  listarEstados,
} from "@/requests/common/EstadosCidades/estadosCidades";
import { buscaCep } from "@/services/buscaCep";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import Swal from "sweetalert2";
import * as yup from "yup";

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

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [dadosEstado, setDadosEstado] = useState<any[]>([]);
  const [cidades, setCidades] = useState<any[]>([]);

  const selecionaTipoDistribuidor = [
    { value: "0", label: "Distribuidor" },
    { value: "1", label: "Fornecedor" },
  ];

  const clearFormToSubmit = (data: any) => {
    const distribuidoresExistentes = (rest?.distribuidores ?? []) as any[];
    const nomeInformado = String(data?.nome_distribuidor ?? "")
      .trim()
      .toLowerCase();
    const distribuidorDuplicado = distribuidoresExistentes.find(
      (distribuidor: any) =>
        String(distribuidor.nome_distribuidor ?? "")
          .trim()
          .toLowerCase() === nomeInformado
    );

    if (distribuidorDuplicado) {
      Swal.fire({
        title: "Atenção!",
        text: "Já existe um distribuidor com esse nome.",
        icon: "warning",
        confirmButtonText: "OK",
      });
      return;
    }

    for (let key in data) {
      form.setValue(key as never, "" as never);
    }

    onSubmitFunction(data);
  };

  const { isMobile } = useScreenContext();

  useEffect(() => {
    listarEstados().then((arr) => setDadosEstado(arr));
    listarCidades().then((arr) => setCidades(arr));
  }, []);

  const [cep, setCep] = useState<string>("");
  const [logradouro, setLogradouro] = useState<string>("");
  const [bairro, setBairro] = useState<string>("");
  const [estadoSelecionado, setEstadoSelecionado] = useState<string>();
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>();
  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_distribuidor", enderecoInfo!.bairro);
      form.setValue("endereco_distribuidor", enderecoInfo!.rua);
      form.setValue("estado_distribuidor", enderecoInfo!.estado);
      form.setValue("cidade_distribuidor", enderecoInfo!.cidade);
      setLoadingCep(false);

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

  return (
    <>
      <form onSubmit={handleSubmit(clearFormToSubmit)} {...rest}>
        <div className="flex flex-col gap-5 p-3">
          <InputGroup align="center">
            <InputSelectComponent
              formulario={form}
              label="Fornecedor/Distribuidor"
              width={"xl:w-1/2"}
              options={selecionaTipoDistribuidor}
              name="isFornecedor_distribuidor"
              required
              error="Preencha esse campo!"
              autoComplete="off"
            />
            <Input
              formulario={form}
              label="Nome"
              width={"xl:w-1/2"}
              name="nome_distribuidor"
              required
              mascara="letras"
              error="Preencha esse campo!"
            />
            <Input
              formulario={form}
              label="Pessoa de Contato"
              width={"xl:w-1/2"}
              name="pessoa_contato_distribuidor"
              mascara="letras"
            />
          </InputGroup>

          <InputGroup align="center">
            <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_distribuidor"
                autoComplete="off"
                width={"xl:w-1/2"}
                disabled={loadingCep}
                mascara="cep"
                onChange={(e) => handleCEPChange(e.target.value)}
              />
            </div>
            <Input
              formulario={form}
              label="Bairro"
              name="bairro_distribuidor"
              autoComplete="off"
              width={"xl:w-1/2"}
              disabled={cep != "" && cep != "0" && bairro != ""}
            />
          </InputGroup>

          <InputGroup align="center">
            <Input
              formulario={form}
              label="Rua"
              name="endereco_distribuidor"
              autoComplete="off"
              width={"xl:w-1/2"}
              disabled={cep != "" && cep != "0" && logradouro != ""}
            />
            <Input
              formulario={form}
              label="Numero"
              mascara="numerico"
              name="numero_distribuidor"
              autoComplete="off"
              width={"xl:w-1/2"}
            />
          </InputGroup>

          <InputGroup align="center">
            <Input
              formulario={form}
              label="Complemento"
              width={"xl:w-1/2"}
              name="complemento_distribuidor"
              autoComplete="off"
            />
            <Input
              formulario={form}
              name="cidade_distribuidor"
              label="Cidade"
              width={"xl:w-1/2"}
              mascara="letras"
              disabled={cep != "" && cep != "0" && cidadeSelecionada != ""}
            />
          </InputGroup>

          <InputGroup align="center">
            <Input
              formulario={form}
              name="estado_distribuidor"
              label="Estado"
              width={"xl:w-1/2"}
              mascara="letras"
              disabled={cep != "" && cep != "0" && estadoSelecionado != ""}
            />
            <Input
              formulario={form}
              label="CNPJ"
              width={"xl:w-1/2"}
              name="cnpj_distribuidor"
              mascara="cnpj"
            />
          </InputGroup>

          <InputGroup align="center">
            <Input
              formulario={form}
              label="Telefone"
              width={"xl:w-1/2"}
              name="telefone1_distribuidor"
              mascara="telefone"
            />
            <Input
              formulario={form}
              label="Email"
              width={"xl:w-1/2"}
              name="email_distribuidor"
              type="email"
            />
          </InputGroup>
        </div>

        {children}
      </form>
    </>
  );
};

export default FormCadastroDistribuidores;