import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarProdutosHelte } from "@/requests/CRM/APIHelte/listarProdutosHelte";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarInversores } from "@/requests/CRUD/Inversor/listarInversores";
import { listarInversoresDistribuidor } from "@/requests/CRUD/InversoresDistribuidores/listarInversoresDistribuidor";
import { listarModulos } from "@/requests/CRUD/Modulos/listarModulos";
import { listarModulosDistribuidor } from "@/requests/CRUD/ModulosDistribuidores/listarModulosDistribuidor";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields, GetForm } from "@/utils";
import { Fragment, useEffect, useState } from "react";
import { FaPaperclip } from "react-icons/fa";
import { MdClose } from "react-icons/md";
import * as yup from "yup";
import FormInversorComplemento from "./FormInversorComplemento";

const FormComplementosCard = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  classForm,
  setIsLoading,
  isLoading,
  ...rest
}: any) => {
  const { handleSubmit: outrosHandleSubmit, ...formOutros } = GetForm();

  const { handleSubmit: kitHandleSubmit, ...formTrocaKit } = GetForm();

  const [handleSubmits, setHandleSubmits] = useState<any[]>([]);

  const [anexos, setAnexos] = useState<File[]>([]);
  const [inversores, setInversores] = useState<any[]>([]);
  const [keyInversores, setKeyInversores] = useState(1);
  const [inputKey, setInputKey] = useState(1);
  const [tipoKit, setTipoKit] = useState<any>();
  const [distribuidoresDisponiveis, setDistribuidoresDisponiveis] = useState<
    any[]
  >([]);
  const [distribuidorSelecionado, setDistribuidorSelecionado] = useState<any>();

  const [listaModulos, setListaModulos] = useState<any[]>([]);
  const [listaInversores, setListaInversores] = useState<any[]>([]);
  const { usuario } = useAuth();

  const [modelo_modulo_complemento_card, setModelo_modulo_complemento_card] =
    useState<any>("");

  //   const formData = new FormData();

  useEffect(() => {
    setInputKey(inputKey + 1);
  }, [anexos]);

  useEffect(() => {
    formTrocaKit.reload();
  }, [defaultValues]);

  useEffect(() => {
    if (distribuidorSelecionado) {
      setListaModulos([]);
      setListaInversores([]);
      setInversores([]);
      formTrocaKit.setValue(
        "modelo_modulo_complemento_card" as never,
        "" as never
      );
      setModelo_modulo_complemento_card("");
      formTrocaKit.setValue(
        "potencia_modulo_complemento_card" as never,
        "" as never
      );
      if (distribuidorSelecionado == 3) {
        listarProdutosHelte().then((res) => {
          const modulos = res.products.modules.map((e: any) => {
            if (usuario.visualiza_custo_kit_usuario == "0") {
              e.label = e.label.split(" (R$")[0];
            }
            return e;
          });
          const inversores = res.products.inverterBrands;

          setListaModulos(
            modulos.map((modulo: any) => ({
              ...modulo,
              potencia: modulo.properties.potency,
            }))
          );
          setListaInversores(inversores);
        });
      } else {
        listarModulosDistribuidor(distribuidorSelecionado).then((res: any) =>
          setListaModulos(
            res.map((e: any) => ({
              ...e,
              value: e.id_item,
              label: e.descricao_item,
              potencia: e.potencia_item,
            }))
          )
        );
        listarInversoresDistribuidor(distribuidorSelecionado).then((res: any) =>
          setListaInversores(
            res.map((e: any) => ({
              ...e,
              value: e.id_item,
              label: e.descricao_item,
              potencia: e.potencia_item,
            }))
          )
        );
      }
    }
  }, [distribuidorSelecionado]);

  useEffect(() => {
    setDistribuidorSelecionado(undefined);
    formTrocaKit.setValue("distribuidor" as never, undefined as never);
    if (tipoKit === "0") {
      listarDistribuidoresNativos().then((res: any) =>
        setDistribuidoresDisponiveis(res)
      );
    } else {
      setInversores([]);
      formTrocaKit.setValue(
        "modelo_modulo_complemento_card" as never,
        "" as never
      );
      setModelo_modulo_complemento_card("");
      formTrocaKit.setValue(
        "potencia_modulo_complemento_card" as never,
        "" as never
      );
      listarModulos().then((res: any) => {
        setListaModulos(
          res.map((e: any) => ({
            ...e,
            value: e.id_item,
            label: e.descricao_item,
            potencia: e.potencia_item,
          }))
        );
        listarInversores().then((res: any) => {
          setListaInversores(
            res.map((e: any) => ({
              ...e,
              value: e.id_item,
              label: e.descricao_item,
              potencia: e.potencia_item,
            }))
          );
        });
      });
    }
    formTrocaKit?.control.unregister(
      ["qtd_modulo_complemento_card"] as never[],
      {
        keepValue: false,
        keepError: false,
      }
    );
    formTrocaKit.reload();
  }, [tipoKit]);

  useEffect(() => {
    setKeyInversores((prev: number) => prev + 1);
  }, [inversores]);

  const adicionarAnexoComplemento = (event: any) => {
    const inputElement = event.target as HTMLInputElement;

    if (inputElement.files && inputElement.files.length > 0) {
      let arquivo = inputElement.files[0];
      setAnexos((prev) => {
        // if (prev.some((anexo) => anexo.name == arquivo.name)) {
          let nomeArquivo = arquivo.name?.replaceAll("/", "_");
          let extensao = nomeArquivo.substring(nomeArquivo.lastIndexOf("."));
          let nomeBase = nomeArquivo.substring(0, nomeArquivo.lastIndexOf("."));

          let contador = 0;
          let novoNome = nomeArquivo;
          while (prev.some((anexo) => anexo.name === novoNome)) {
            novoNome = `${nomeBase} (${++contador})${extensao}`;
          }
          arquivo = new File([arquivo], novoNome, {
            type: arquivo.type,
            lastModified: arquivo.lastModified,
          });
        // }

        return [...prev, arquivo];
      });

      setInputKey(inputKey + 1);
    }
  };

  const handleDownload = (anexo: File) => {
    const url = URL.createObjectURL(anexo);
    const link = document.createElement("a");
    link.href = url;
    link.download = anexo.name;
    link.click();
    URL.revokeObjectURL(url);
  };

  const onSubmitComplemento = async (e: any) => {
    setIsLoading(true);
    return Promise.all(
      handleSubmits.map(
        (handleSubmitItem) =>
          new Promise((resolve, reject) => {
            handleSubmitItem((d: any) => resolve(true))(e).finally(() =>
              reject(false)
            );
          })
      )
    )
      .then((res) => {
        return defaultValues.tipo_complemento_card == "Outros"
          ? outrosHandleSubmit(onSubmitFormComplemento)(e)
          : kitHandleSubmit(onSubmitFormComplemento)(e);
      })
      .catch((err) => {
        setIsLoading(false);
      });

    // data = { ...data, anexos, inversores };
    // data["potencia_modulo_complemento_card"] = FormatFields.desformatarNumeros(
    //   data["potencia_modulo_complemento_card"]
    // );
    // data["isManual_modulo_complemento_card"] = tipoKit;
    // data["isApi_complemento_card"] = data.distribuidor == "3" ? "1" : "0";
    // delete data.distribuidor;
    // return onSubmitFunction(data);
  };

  const onSubmitFormComplemento = async (data: any) => {
    data = { ...data, anexos, inversores };
    data["potencia_modulo_complemento_card"] = FormatFields.desformatarNumeros(
      data["potencia_modulo_complemento_card"]
    );
    data["isManual_modulo_complemento_card"] = tipoKit;
    data["isApi_complemento_card"] = data.distribuidor == "3" ? "1" : "0";
    delete data.distribuidor;
    return onSubmitFunction(data).finally(() => setIsLoading(false));
  };

  return (
    <form>
      <div className="flex flex-col gap-3">
        {defaultValues.tipo_complemento_card == "Outros" ? (
          <Input
            name="descricao_complemento_card"
            label="Descrição"
            type="textarea"
            formulario={formOutros}
            // onInput={(e: any) =>
            //   formData.append("descricao_complemento_card", e.target.value)
            // }
          />
        ) : (
          <>
            <InputSelectComponent
              // name="tipo_de_kit"
              label="Tipo de Kit"
              options={[
                {
                  label: "Kit de Distribuidor",
                  value: "0",
                },
                {
                  label: "Kit Manual",
                  value: "1",
                },
              ]}
              onChange={(e: any) => {
                setTipoKit(e.value);
              }}
            />

            <Fragment key={formTrocaKit.key + 1}>
              {tipoKit === "0" && (
                <InputSelectComponent
                  name="distribuidor"
                  label="Distribuidor"
                  formulario={formTrocaKit}
                  options={distribuidoresDisponiveis.map(
                    (distribuidor: any) => ({
                      label: distribuidor.nome_distribuidor,
                      value: distribuidor.id_distribuidor,
                    })
                  )}
                  onChange={(e: any) => {
                    setDistribuidorSelecionado(e.value);
                  }}
                />
              )}
            </Fragment>
            {tipoKit && (tipoKit === "0" ? distribuidorSelecionado : true) && (
              <>
                <Fragment key={formTrocaKit.key}>
                  <InputSelectComponent
                    name="modelo_modulo_complemento_card"
                    label="Modelo dos módulos"
                    formulario={formTrocaKit}
                    options={[
                      {
                        label: "Não Alterar",
                        value: "",
                        potencia: "",
                      },
                      ...listaModulos,
                    ]}
                    onChange={(e: any) => {
                      formTrocaKit.setValue(
                        "potencia_modulo_complemento_card" as never,
                        FormatFields.formatarNumero(e.potencia) as never
                      );
                      setModelo_modulo_complemento_card(e.value);
                    }}
                  />
                  <Input
                    name="potencia_modulo_complemento_card"
                    label="Potência dos módulos"
                    formulario={formTrocaKit}
                    mascara="numero"
                    disabled
                  />
                  {modelo_modulo_complemento_card && (
                    <Input
                      name="qtd_modulo_complemento_card"
                      label="Quantidade dos módulos"
                      formulario={formTrocaKit}
                      mascara="numerico"
                      schema={yup
                        .number()
                        .required("Informe a Quantidade")
                        .transform((val) => +val || 0)
                        .min(1, "Quantidade mínima: 1")}
                    />
                  )}
                </Fragment>
                <div className="flex flex-col gap-2 py-2" key={keyInversores}>
                  {inversores.map((inversor: any, index: number) => (
                    <FormInversorComplemento
                      key={index}
                      indexItem={index}
                      // setKeyInversores={setKeyInversores}
                      setInversores={setInversores}
                      listaInversores={listaInversores}
                      distribuidorSelecionado={distribuidorSelecionado}
                      tipoKit={tipoKit}
                      setHandleSubmits={setHandleSubmits}
                      inversor={inversor}
                    />
                  ))}
                </div>
                <Button
                  type="button"
                  className="self-end bg-primary"
                  onClick={() =>
                    setInversores((prev) => [
                      ...prev,
                      {
                        modelo_inversor_complemento_card: "",
                        quantidade_inversor_complemento_card: "",
                        potencia_inversor_complemento_card: "",
                      },
                    ])
                  }
                >
                  Adicionar Inversor
                </Button>
              </>
            )}
          </>
        )}
        <div className="flex flex-col gap-1">
          {anexos.map((anexo: File, index) => (
            <div
              key={index}
              className="flex flex-row justify-between w-[500px] px-2 cursor-pointer hover:bg-[rgb(0,0,0)]/[.1] border border-transparent hover:border-black/[0.4]"
              onClick={() => handleDownload(anexo)}
            >
              <div className="w-[400px] overflow-hidden text-ellipsis">
                {anexo.name}
              </div>
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  setAnexos((prev) => {
                    const newAnexos = [...prev];
                    newAnexos.splice(index, 1);
                    return newAnexos;
                  });
                }}
              >
                <MdClose />
              </button>
            </div>
          ))}
        </div>
        <label
          htmlFor="add_imagem"
          className="justify-center dark:text-white whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground flex bg-success hover:brightness-90 hover:bg-success justify-self-end text-sm h-fit items-center w-fit m-1 mb-4 p-1 px-2 cursor-pointer"
        >
          <FaPaperclip /> Adicionar arquivo
        </label>
        <input
          id="add_imagem"
          type="file"
          accept="application/pdf, image/png, image/gif, image/jpeg"
          className="hidden"
          key={inputKey}
          onInput={(e) => adicionarAnexoComplemento(e)}
        />
      </div>
      <div className="flex justify-end">
        <Button type="button" onClick={onSubmitComplemento} loading={isLoading}>
          Salvar
        </Button>
      </div>
    </form>
  );
};

export default FormComplementosCard;