import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarOrigemCliente } from "@/requests/CRUD/Cliente/cadastroCliente";
import { verificaTelefone } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { buscaCep } from "@/services/buscaCep";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { IValueLabel } from "@/types/formInterfaces";
import { Fragment, useEffect, useState } from "react";

const EdicaoClienteCard = ({ form, dadosCliente, dadosCard }: any) => {
  const [listaOrigens, setListaOrigens] = useState<IValueLabel[]>([]);

  const [estadoSelecionado, setEstadoSelecionado] = useState<any>(
    dadosCliente.estado_cliente,
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    dadosCliente.cidade_cliente,
  );

  const { cidades, estadosFiltro: estados } = useKanbanContext();

  const handleValidaTelefone = (e: any) => {
    if (e.target.value != "") {
      verificaTelefone(e.target.value).then((res: any) => {
        if (res.body) {
          form.control.setError("telefone1_cliente", {
            type: "required",
            message: "Telefone já cadastrado",
          });
        } else {
          form.clearErrors("telefone1_cliente");
        }
      });
    }
  };
  useEffect(() => {
    listarOrigemCliente().then((res: any) => {
      setListaOrigens(
        res.map((origem: any) => ({
          label: `${origem.nome_origem_cliente}`,
          value: `${origem.id_origem_cliente}`,
        })),
      );
    });
  }, []);

  useEffect(() => {
    if (estadoSelecionado != dadosCliente.estado_cliente) {
      setCidadeSelecionada(
        cidades.find(
          (cidade) =>
            cidade.estado_cidade ==
            estados.find((estado) => estado.uf_estado == estadoSelecionado)
              ?.id_estado,
        )?.nome_cidade,
      );
    } else {
      setCidadeSelecionada(dadosCliente.cidade_cliente);
    }
  }, [estadoSelecionado]);

  const [cep, setCep] = useState<string>(dadosCliente["cep_empresa"]);
  const [logradouro, setLogradouro] = useState<string>(
    dadosCliente["rua_cliente"],
  );
  const [bairro, setBairro] = useState<string>(dadosCliente["bairro_cliente"]);
  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_cliente", enderecoInfo!.bairro);
      form.setValue("rua_cliente", enderecoInfo!.rua);
      form.setValue("estado_cliente", enderecoInfo!.estado);
      form.setValue("cidade_cliente", enderecoInfo!.cidade);
      setLoadingCep(false);
      setBairro(enderecoInfo!.bairro || "");
      setLogradouro(enderecoInfo!.rua || "");
      setCidadeSelecionada(enderecoInfo!.cidade);
      setEstadoSelecionado(enderecoInfo!.estado);
    }
  };

  useEffect(() => {}, [dadosCard]);

  return (
    <Fragment>
      <InputGroup>
        <Input
          formulario={form}
          name="nome_cliente"
          label="Nome"
          defaultValue={dadosCliente.nome_cliente}
        />
        <Input
          formulario={form}
          name="telefone1_cliente"
          label="Telefone"
          onBlur={(e: any) => handleValidaTelefone(e)}
          mascara="telefone"
          defaultValue={dadosCliente.telefone1_cliente}
        />
      </InputGroup>
      <InputGroup>
        <Input
          formulario={form}
          name="cpfcnpj_cliente"
          label="CPF"
          mascara="cpf"
          defaultValue={dadosCliente.cpfcnpj_cliente}
        />
        <Input
          formulario={form}
          name="email_cliente"
          label="E-mail"
          type="email"
          defaultValue={dadosCliente.email_cliente}
        />
      </InputGroup>
      <InputGroup>
        <InputSelectComponent
          formulario={form}
          name="origem_cliente"
          label="Origem"
          options={listaOrigens}
          defaultValue={dadosCliente.origem_cliente}
        />
        <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_cliente"
            autoComplete="off"
            mascara="cep"
            disabled={loadingCep}
            defaultValue={dadosCliente["cep_cliente"]}
            onBlur={(e) => handleCEPChange(e.target.value)}
          />
        </div>
        <InputSelectComponent
          name="estado_cliente"
          label="Estado"
          formulario={form}
          options={estados.map((estado) => ({
            label: `${estado.nome_estado} - ${estado.uf_estado}`,
            value: `${estado.uf_estado}`,
          }))}
          onChange={(e: any) => setEstadoSelecionado(e.value)}
          disabled={cep != "" && cep != "0" && estadoSelecionado != ""}
          defaultValue={estadoSelecionado}
        />
        <InputSelectComponent
          name="cidade_cliente"
          label="Cidade"
          formulario={form}
          options={cidades
            .filter(
              (cidade) =>
                estados.find((estado) => estado.uf_estado == estadoSelecionado)
                  ?.id_estado == cidade.estado_cidade,
            )
            .map((cidade) => ({
              label: `${cidade.nome_cidade}`,
              value: `${cidade.nome_cidade}`,
            }))}
          disabled={cep != "" && cep != "0" && cidadeSelecionada != ""}
          onChange={(e: any) => setCidadeSelecionada(e.value)}
          defaultValue={cidadeSelecionada}
        />
      </InputGroup>
      <InputGroup>
        <Input
          formulario={form}
          name="bairro_cliente"
          label="Bairro"
          defaultValue={dadosCliente.bairro_cliente}
          disabled={cep != "" && cep != "0" && bairro != ""}
        />
        <Input
          formulario={form}
          name="rua_cliente"
          label="Rua"
          defaultValue={dadosCliente.rua_cliente}
          disabled={cep != "" && cep != "0" && logradouro != ""}
        />
      </InputGroup>
    </Fragment>
  );
};

export default EdicaoClienteCard;