import LoaderSun from "@/components/common/Loader/LoaderSun";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
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 FormEditarDistribuidor = ({
  onEditFunction,
  children,
  id_distribuidor,
  ...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 [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [defaultValues, setDefaultValues] = useState<any>({});

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

  const clearFormToSubmit = (data: any) => {
    const nomeInformado = String(data?.nome_distribuidor ?? "")
      .trim()
      .toLowerCase();
    const distribuidorDuplicado = distribuidores.find(
      (distribuidor: any) =>
        String(distribuidor.id_distribuidor) !== String(id_distribuidor) &&
        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;
    }

    onEditFunction(data);
  };

  const { isMobile } = useScreenContext();

  // useEffect(() => {
  //   listarDistribuidores().then((arr) => setDistribuidores(arr));
  // }, []);

  useEffect(() => {
    listarDistribuidores().then((arr) => {
      setDistribuidores(arr);
      const filtered = arr.find(
        (distribuidor: any) => distribuidor.id_distribuidor === id_distribuidor
      );
      if (filtered) {
        setDefaultValues(filtered);
      }
    });
  }, [id_distribuidor]);

  // useEffect(() => {
  //   if (defaultValues) {
  //     Object.keys(defaultValues).forEach((key) => {
  //       form.setValue(key, defaultValues[key]);
  //     });
  //   }
  // }, [defaultValues, form]);

  const [cep, setCep] = useState<string>(defaultValues["cep_distribuidor"]);
  const [bairro, setBairro] = useState<string>(
    defaultValues["bairro_distribuidor"]
  );
  const [logradouro, setLogradouro] = useState<string>(
    defaultValues["endereco_distribuidor"]
  );
  const [estadoSelecionado, setEstadoSelecionado] = useState<string>(
    defaultValues["estado_distribuidor"]
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    defaultValues["cidade_distribuidor"]
  );
  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}>
        {defaultValues["nome_distribuidor"] ? (
          <>
            <div className="flex flex-col gap-5 p-3">
              <InputGroup align="center">
                <Input
                  formulario={form}
                  label="Nome"
                  width={"xl:w-1/2"}
                  name="nome_distribuidor"
                  required
                  mascara="letras"
                  error="Preencha esse campo!"
                  defaultValue={defaultValues.nome_distribuidor}
                />
                <Input
                  formulario={form}
                  label="Pessoa de Contato"
                  width={"xl:w-1/2"}
                  name="pessoa_contato_distribuidor"
                  mascara="letras"
                  defaultValue={defaultValues.pessoa_contato_distribuidor}
                />
              </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"}
                    mascara="cep"
                    disabled={loadingCep}
                    onChange={(e) => handleCEPChange(e.target.value)}
                    defaultValue={defaultValues?.cep_distribuidor}
                  />
                </div>
                <Input
                  formulario={form}
                  label="Bairro"
                  name="bairro_distribuidor"
                  autoComplete="off"
                  width={"xl:w-1/2"}
                  defaultValue={defaultValues?.bairro_distribuidor}
                  disabled={cep != "" && cep != "0" && bairro != ""}
                />
              </InputGroup>

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

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

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

              <InputGroup align="center">
                <Input
                  formulario={form}
                  label="Telefone"
                  width={"xl:w-1/2"}
                  name="telefone1_distribuidor"
                  mascara="telefone"
                  defaultValue={defaultValues?.telefone1_distribuidor}
                />
                <Input
                  formulario={form}
                  label="Email"
                  width={"xl:w-1/2"}
                  name="email_distribuidor"
                  type="email"
                  defaultValue={defaultValues?.email_distribuidor}
                />
              </InputGroup>
            </div>
            {children}
          </>
        ) : (
          <>
            <div className="flex justify-center items-center w-full">
              <LoaderSun />
            </div>
          </>
        )}
      </form>
    </>
  );
};

export default FormEditarDistribuidor;