import AmazonStorageChart from "@/components/Charts/AmazonChart";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { Progress } from "@/components/ui/progress";
import { mostrarArmazenamentoAws } from "@/requests/common/Aws/listarArmazenamento";
import {
  ICidade,
  IEstado,
  listarCidades,
  listarEstados,
} from "@/requests/common/EstadosCidades/estadosCidades";
import { buscaCep } from "@/services/buscaCep";
import { useAuth } from "@/src/contexts/authContext";
import { IValueLabel } from "@/types/formInterfaces";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import * as yup from "yup";

const FormIntegrador = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  classForm,
  ...rest
}: any) => {
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const perfil = session.perfil_usuario;

  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [estados, setEstados] = useState<any[]>([]);
  const [imageLogo, setImageLogo] = useState<any>("");
  const [cidades, setCidades] = useState<ICidade[]>([]);
  const [estadoSelecionado, setEstadoSelecionado] = useState<string>(
    defaultValues && defaultValues["estado_empresa"],
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    defaultValues && defaultValues["cidade_empresa"],
  );
  const [totalAmazon, setTotalAmazon] = useState(0);
  const [usadoAmazon, setUsadoAmazon] = useState(0);
  useEffect(() => {
    mostrarArmazenamentoAws(session.id_empresa_usuario).then((e: any) => {
      setTotalAmazon(e.totalStorageGB);
      setUsadoAmazon(e.totalSize);
    });
  }, []);

  useEffect(() => {
    listarEstados().then((arr) => setEstados(arr));
    listarCidades().then((arr) => setCidades(arr));
    // listarDistribuidores().then((res) =>
    //   setDistribuidores(res.filter((e: any) => e.status_distribuidor == "1"))
    // );
  }, []);

  useEffect(() => {
    if (
      estadoSelecionado != (defaultValues && defaultValues["estado_empresa"])
    ) {
      setCidadeSelecionada(
        cidades.find(
          (cidade) =>
            cidade.estado_cidade ==
            estados.find((estado) => estado.uf_estado == estadoSelecionado)
              ?.id_estado,
        )?.nome_cidade,
      );
    } else {
      setCidadeSelecionada(defaultValues && defaultValues["cidade_empresa"]);
    }
  }, [estadoSelecionado]);

  const [cep, setCep] = useState<string>(defaultValues["cep_empresa"]);
  const [logradouro, setLogradouro] = useState<string>(
    defaultValues["rua_empresa"],
  );
  const [bairro, setBairro] = useState<string>(defaultValues["bairro_empresa"]);
  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_empresa" as never, enderecoInfo!.bairro as never);
      form.setValue("rua_empresa" as never, enderecoInfo!.rua as never);

      const estado = estados.find((e) =>
        e.uf_estado.includes(enderecoInfo!.estado),
      );
      form.setValue("uf_coleta", {
        label: estado.nome_estado,
        value: estado.uf_estado,
      });

      const cidade = cidades
        .filter((cf) => cf.estado_cidade == estado.id_estado)
        .find((c) => c.nome_cidade.includes(enderecoInfo!.cidade));

      form.setValue("cidade_empresa", {
        label: cidade!.nome_cidade,
        value: cidade!.id_cidade,
      });
      setLoadingCep(false);
      setBairro(enderecoInfo!.bairro || "");
      setLogradouro(enderecoInfo!.rua || "");
      setCidadeSelecionada(enderecoInfo!.cidade);
    }
  };

  const submitTeste = (data: FieldValues) => {
    // data["logo_cliente_linksun"] = imageLogo;
    // data["distribuidores_cliente_linksun"] =
    //   data["distribuidores_cliente_linksun"].join(",");

    onSubmitFunction(data);
  };

  return (
    <form
      className={`flex flex-col gap-2 ${classForm}`}
      onSubmit={handleSubmit(submitTeste)}
      {...rest}
    >
      {(perfil == 1 || perfil == 1000) && (
        <>
          <div className="flex">
            <section className="select-none">
              <div className="flex mb-5">
                <AmazonStorageChart
                  usadoAmazon={usadoAmazon}
                  totalAmazon={totalAmazon}
                />
                <div className="flex flex-col w-auto self-center max-sm:text-sm text-start  font-medium text-black-2 dark:text-stroke text-lg md:text-title-md mb-2">
                  <span>Armazenamento AWS</span>
                  <span className="text-sm max-sm:text-xs text-strokedark dark:text-stroke">
                    Está sendo utilizado {usadoAmazon} GB do seu plano.
                  </span>
                  <Progress className="h-2 mt-2" />
                </div>
              </div>
            </section>
          </div>
        </>
      )}
      <InputGroup>
        <Input
          name="nome_empresa"
          label="Nome da Empresa"
          formulario={form}
          required
          error="Informe o Nome da Empresa"
          defaultValue={defaultValues && defaultValues["nome_empresa"]}
        />
        <Input
          name="cnpj_empresa"
          label="CNPJ"
          formulario={form}
          required
          error="Informe o Nome da Empresa"
          mascara="cnpj"
          defaultValue={defaultValues && defaultValues["cnpj_empresa"]}
        />
      </InputGroup>
      <div className="flex flex-col rounded border p-2">
        <div className="font-semibold">Endereço</div>
        <InputGroup>
          <div className="w-full">
            {loadingCep && (
              <span className="text-xs text-gray-500 mt-1 block">
                Buscando endereço...
              </span>
            )}

            <Input
              name="cep_empresa"
              label="CEP"
              formulario={form}
              mascara="cep"
              required
              error={"Informe o número"}
              onChange={(e: any) => handleCEPChange(e.target.value)}
              defaultValue={defaultValues && defaultValues["cep_empresa"]}
              disabled={
                disabledFields?.some(
                  (field: string) => field == "cep_empresa",
                ) || loadingCep
              }
            />
          </div>
          <InputSelectComponent
            name="estado_empresa"
            label="Estado"
            options={estados.map((estado: IEstado) => ({
              label: `${estado.uf_estado} - ${estado.nome_estado}`,
              value: `${estado.uf_estado}`,
            }))}
            formulario={form}
            onChange={(e: any) => setEstadoSelecionado(e.value)}
            required
            error="Selecione o estado"
            defaultValue={estadoSelecionado}
            disabled={
              disabledFields?.some(
                (field: string) => field == "estado_empresa",
              ) ||
              (cep != "" && cep != "0" && estadoSelecionado != "")
            }
          />
          <InputSelectComponent
            name="cidade_empresa"
            label="cidade"
            options={cidades
              .filter(
                (cidade) =>
                  cidade.estado_cidade ==
                  estados.find(
                    (estado) => estado.uf_estado == estadoSelecionado,
                  )?.id_estado,
              )
              .map<IValueLabel>((cidade: ICidade) => ({
                label: cidade.nome_cidade,
                value: cidade.nome_cidade,
              }))}
            formulario={form}
            required
            error="Selecione a cidade"
            defaultValue={cidadeSelecionada}
            disabled={
              disabledFields?.some(
                (field: string) => field == "cidade_empresa",
              ) ||
              (cep != "" && cep != "0" && cidadeSelecionada != "")
            }
          />
        </InputGroup>
        <InputGroup>
          <Input
            name="nro_empresa"
            label="Número empresa"
            formulario={form}
            mascara="numerico"
            required
            error={"Informe o número"}
            defaultValue={defaultValues && defaultValues["nro_empresa"]}
            disabled={disabledFields?.some(
              (field: string) => field == "nro_empresa",
            )}
          />
          <Input
            name="rua_empresa"
            label="Rua"
            formulario={form}
            error={"Informe a Rua"}
            required
            defaultValue={defaultValues && defaultValues["rua_empresa"]}
            disabled={
              disabledFields?.some((field: string) => field == "rua_empresa") ||
              (cep != "" && cep != "0" && logradouro != "")
            }
          />
          <Input
            name="bairro_empresa"
            label="Bairro"
            formulario={form}
            required
            error={"Informe o número"}
            defaultValue={defaultValues && defaultValues["bairro_empresa"]}
            disabled={
              disabledFields?.some(
                (field: string) => field == "bairro_empresa",
              ) ||
              (cep != "" && cep != "0" && bairro != "")
            }
          />
          <Input
            name="complemento_empresa"
            label="Complemento"
            formulario={form}
            defaultValue={defaultValues && defaultValues["complemento_empresa"]}
            disabled={disabledFields?.some(
              (field: string) => field == "complemento_empresa",
            )}
          />
        </InputGroup>
      </div>
      <div className="flex flex-col rounded border p-2">
        <div className="font-semibold">Contato</div>
        <InputGroup>
          <Input
            name="email_empresa"
            label="email"
            formulario={form}
            error={"Preencha o Telefone"}
            required
            defaultValue={defaultValues && defaultValues["email_empresa"]}
            disabled={disabledFields?.some(
              (field: string) => field == "email_empresa",
            )}
          />
          <Input
            name="telefone1_empresa"
            label="Telefone"
            formulario={form}
            mascara="telefone"
            error={"Preencha o Telefone"}
            required
            defaultValue={defaultValues && defaultValues["telefone1_empresa"]}
            disabled={disabledFields?.some(
              (field: string) => field == "telefone1_empresa",
            )}
          />
          <Input
            name="telefone2_empresa"
            label="Telefone 2"
            formulario={form}
            mascara="telefone"
            defaultValue={defaultValues && defaultValues["telefone2_empresa"]}
            disabled={disabledFields?.some(
              (field: string) => field == "telefone2_empresa",
            )}
          />
        </InputGroup>
      </div>
      {/* <InputGroup>
        {distribuidores[0] && (
          <InputSelectComponent
            name="distribuidores_cliente_linksun"
            label="Distribuidores"
            formulario={form}
            isMulti
            options={[
              { label: "Todos", value: "*" },
              ...distribuidores.map((distribuidor) => ({
                label: distribuidor.nome_distribuidor,
                value: distribuidor.id_distribuidor,
              })),
            ]}
            onChange={(selectedOptions: any) => {
              if (selectedOptions.some((e: any) => e.value == "*")) {
                form.setValue(
                  "distribuidores_cliente_linksun" as never,
                  distribuidores.map((distribuidor) => ({
                    label: distribuidor.nome_distribuidor,
                    value: distribuidor.id_distribuidor,
                  })) as never
                );
              }
            }}
            defaultValue={distribuidores_cliente_linksun}
            skipEffect
          />
        )}
      </InputGroup> */}
      {/* <div>
        <Input
          label="Logo"
          name="logo_cliente_linksun"
          type="file"
          accept="image/*"
          onInputProp={(event: any) => {
            const inputElement = event.target as HTMLInputElement;

            if (inputElement.files && inputElement.files.length > 0) {
              const file = inputElement.files[0];

              const reader = new FileReader();
              reader.onloadend = () => {
                const base64String = reader.result as string;

                setImageLogo(base64String);
              };

              reader.readAsDataURL(file);
            }
            return 1;
          }}
          defaultValue={defaultValues && defaultValues["logo_cliente_linksun"]}
        />
      </div> */}
      <br />
      <div className="flex justify-center items-center w-full">{children}</div>
    </form>
  );
};

export default FormIntegrador;