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 { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { mostrarArmazenamentoAws } from "@/requests/common/Aws/listarArmazenamento";
import {
  ICidade,
  IEstado,
  listarCidades,
  listarEstados,
} from "@/requests/common/EstadosCidades/estadosCidades";
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 [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidores_cliente_linksun, setDistribuidores_cliente_linksun] =
    useState(defaultValues && defaultValues["distribuidores_cliente_linksun"]);
  const [estadoSelecionado, setEstadoSelecionado] = useState<string>(
    defaultValues && defaultValues["estado_cliente_linksun"]
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    defaultValues && defaultValues["cidade_cliente_linksun"]
  );
  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_cliente_linksun"])
    ) {
      setCidadeSelecionada(
        cidades.find(
          (cidade) =>
            cidade.estado_cidade ==
            estados.find((estado) => estado.uf_estado == estadoSelecionado)
              ?.id_estado
        )?.nome_cidade
      );
    } else {
      setCidadeSelecionada(
        defaultValues && defaultValues["cidade_cliente_linksun"]
      );
    }
  }, [estadoSelecionado]);

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

    onSubmitFunction(data);
  };

  return (
    <form className={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>
        <InputSelectComponent
          name="estado_cliente_linksun"
          label="Estado"
          width="xl:w-1/3"
          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_cliente_linksun"
          )}
        />
        <InputSelectComponent
          width="xl:w-1/3"
          name="cidade_cliente_linksun"
          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_cliente_linksun"
          )}
        />
        <Input
          name="telefone_cliente_linksun"
          label="Telefone"
          width="xl:w-1/3"
          formulario={form}
          mascara="telefone"
          error={"Preencha o Telefone"}
          required
          defaultValue={
            defaultValues && defaultValues["telefone_cliente_linksun"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "telefone_cliente_linksun"
          )}
        />
      </InputGroup>
      {/* <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;