"use client";
import { DistribuidorLabel } from "@/components/common/DistribuidorLabel";
import { DistribuidorModal } from "@/components/common/DistribuidorModal";
import { FabricanteLabel } from "@/components/common/FabricanteLabel";
import { FabricanteModal } from "@/components/common/FabricanteModal";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useDistribuidorModal } from "@/hooks/useDistribuidorModal";
import { useFabricanteModal } from "@/hooks/useFabricanteModal";
import { useFileLoader } from "@/hooks/useFileLoader";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { FormatFields, GetForm } from "@/utils";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import * as yup from "yup";

const FormInversor = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  // distribuidores,
  // fabricantes,
  baterias,
  tiposInversores,
  stringboxes,
  tiposStrings,
  tensoes,
  origem,
  children,
  ...rest
}: any) => {
  const [imagemFile, setImagemFile] = useState<File | null | any>(null);
  const [imagensFile, setImagensFile] = useState<File[]>([]);
  const [imagensBase64, setImagensBase64] = useState<any>([]);
  const [fase, setFase] = useState<any>(
    (defaultValues && defaultValues?.["fases_item"]) || ""
  );
  const [imagensDefBase64, setImagensDefBase64] = useState<any[]>([]);
  const [tipoInversorItem, setTipoInversorItem] = useState<any>(
    defaultValues && defaultValues.tipoInversor_item
  );
  const [blockGravacao, setBlockGravacao] = useState(false);
  const [fichaBase64, setFichaBase64] = useState("");
  const [fichaFile, setFichaFile] = useState<File | null | any>(null);
  const [manualBase64, setManualBase64] = useState("");
  const [manualFile, setManualFile] = useState<File | null | any>(null);
  const [tensoes_item, setTensoes_item] = useState<string[]>(
    defaultValues?.tensoes_item?.split(",") || []
  );
  const [idStringCC, setIdStringCC] = useState(
    defaultValues?.["idStringCC_item"]
  );
  const [idStringCA, setIdStringCA] = useState(
    defaultValues?.["idStringCA_item"]
  );
  const { handleSubmit, ...form } = GetForm();

  const {
    files: imagemFiles,
    base64: imagemBase64s,
    loadFromAwsPaths: loadImagemAws,
  } = useFileLoader();

  const {
    showDistribuidorModal,
    isDistribuidorLoading,
    handleOpenDistribuidorModal,
    handleCloseDistribuidorModal,
    handleDistribuidorSubmit,
    distribuidores,
  } = useDistribuidorModal();

  const {
    showFabricanteModal,
    isFabricanteLoading,
    handleOpenFabricanteModal,
    handleCloseFabricanteModal,
    handleFabricanteSubmit,
    fabricantes,
  } = useFabricanteModal("8");

  const tensoesMonofasico = ["127", "220", "240"];
  const [stringSelected, setStringSelected] = useState<string | null>(
    defaultValues?.["tipoStringInversor_item"] ?? null
  );

  useEffect(() => {
    if (!defaultValues) return;

    const processarArquivos = async (
      campo: string,
      setFiles: React.Dispatch<React.SetStateAction<File[]>>,
      setBase64: any
    ) => {
      const urls = defaultValues?.[campo]?.split(",");
      if (!urls || urls.length === 0) return;

      try {
        const files: File[] = [];
        const base64Array: string[] = [];

        for (const imageUrl of urls) {
          const result = await baixarAwsBase64(imageUrl);
          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;

          const base64Content = resultObject.base64;
          const hasPrefix = base64Content.startsWith("data:image");
          const formattedBase64 = hasPrefix
            ? base64Content
            : `data:image/jpeg;base64,${base64Content}`;

          base64Array.push(formattedBase64);

          const byteCharacters = atob(base64Content);
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);
          const blob = new Blob([byteArray], {
            type: "application/octet-stream",
          });

          const fileName = imageUrl.split("/").pop() || "arquivo.png";
          const file = new File([blob], fileName, { type: blob.type });

          files.push(file);
        }

        setFiles(files);
        setBase64(base64Array); // ou ajusta aqui se sempre for array
      } catch (error) {
        console.error(`Erro ao carregar arquivos do campo ${campo}:`, error);
      }
    };

    // imagem_item (múltiplos)
    if (defaultValues?.["imagem_item"]) {
      processarArquivos("imagem_item", setImagemFile, setImagensBase64);
    }

    // caminhoFicha_item (pode ser múltiplo agora também)
    if (defaultValues?.["caminhoFicha_item"]) {
      processarArquivos("caminhoFicha_item", setFichaFile, setFichaBase64);
    }

    // caminhoManual_item (idem)
    if (defaultValues?.["caminhoManual_item"]) {
      processarArquivos("caminhoManual_item", setManualFile, setManualBase64);
    }
  }, [defaultValues]);

  const fileInputs = [
    {
      name: "caminhoFicha_item",
      label: "Ficha Técnica",
      base64State: fichaBase64,
      setBase64: setFichaBase64 as any,
      setFile: setFichaFile,
      isMultiple: true,
    },
    {
      name: "imagens_item",
      label: "Imagens",
      base64State: imagensBase64,
      setBase64: setImagensBase64,
      setFile: setImagemFile,
      isMultiple: true,
    },
    {
      name: "caminhoManual_item",
      label: "Manual",
      base64State: manualBase64,
      setBase64: setManualBase64,
      setFile: setManualFile,
      isMultiple: true,
    },
  ];

  useEffect(() => {
    const tipoFaseStringbox = uniq(
      stringboxes
        ?.filter((b: any) => [idStringCC, idStringCA].includes(b.id_item))
        .map((c: any) => c.fases_item)
    );

    setBlockGravacao(
      !tipoFaseStringbox?.every((a: any) => a === fase) &&
        !tipoFaseStringbox?.includes("*")
    );
  }, [fase, idStringCC, idStringCA]);

  async function validarBaterias(data: any): Promise<boolean> {
    const isOffGridOrHibrido =
      stringSelected === "inversor_off_grid" ||
      stringSelected === "inversor_hibrido";

    if (!isOffGridOrHibrido) {
      return true;
    }

    const temBateriaLitio =
      data["qtdBateriasLitio_item"] && data["idBateriaLitio_item"];

    const temBateriaChumbo =
      data["qtdBateriasChumboAcido_item"] && data["idBateriaChumbo_item"];

    // Se não tem nenhuma bateria configurada
    if (!temBateriaLitio && !temBateriaChumbo) {
      const result = await handleSweetAlert({
        icon: "warning",
        title: "Atenção: Nenhuma Bateria Configurada",
        html: `
          <div class="text-left">
            <p class="mb-4">
              O inversor do tipo <strong>${stringSelected.replace("inversor_", "").toUpperCase()}</strong> 
              foi selecionado, mas nenhuma bateria foi configurada.
            </p>
            <p>
              Deseja continuar sem adicionar baterias?
            </p>
          </div>
        `,
        confirmButtonText: "Sim, continuar sem baterias",
        denyButtonText: "Não, configurar baterias",
      });

      return result.isConfirmed;
    }

    return true;
  }

  async function onSubmitInversores(data: any) {
    if (blockGravacao) {
      return toast.error(
        "Strings selecionadas não são da mesma fase selecionada!"
      );
    }

    // Validar baterias para inversor off-grid ou híbrido
    const bateriaValidada = await validarBaterias(data);
    if (!bateriaValidada) {
      return; // Usuário cancelou
    }

    data["precoUnitario_item"] = FormatFields.desformatarNumeros(
      data["precoUnitario_item"]
    );
    if (!manualFile || (Array.isArray(manualFile) && manualFile.length === 0)) {
      data["caminhoManual_item_deletar"] = true;
    }
    if (!fichaFile || (Array.isArray(fichaFile) && fichaFile.length === 0)) {
      data["caminhoFicha_item_deletar"] = true;
    }
    if (!imagemFile || (Array.isArray(imagemFile) && imagemFile.length === 0)) {
      data["imagem_item_deletar"] = true;
    }
    delete data["caminhoFicha_item"];
    delete data["imagens_item"];
    delete data["imagem_item"];
    data["anexo"] = imagemFile;
    data["ficha"] = fichaFile;
    data["manual"] = manualFile;

    data["parametro"] = "inversor";
    data["parametro_coluna"] = "inversores";
    data["parametro_anexo"] = "imagem_item";
    data["subpasta_aws"] = "Inversor/AnexoInversor";

    data["potenciaNominalMinima_item"] =
      +data["potencia_item"] * (+data["underload_item"] / 100);
    data["potenciaNominalMaxima_item"] =
      +data["potencia_item"] * (+data["overload_item"] / 100);

    data["tensoes_item"] = tensoes_item?.join(",");
    if (data["tensoes_item"] == "") {
      return toast.error("Selecione ao menos uma tensão");
    }

    return onSubmitFunction(data);
  }
  function uniq(a: any[]): any {
    var seen: any = {};
    return a?.filter(function (item) {
      return seen.hasOwnProperty(item) ? false : (seen[item] = true);
    });
  }
  const [skuEditado, setSkuEditado] = useState(false);

  useEffect(() => {
    setImagensDefBase64(imagensBase64);
  }, [imagensBase64]);
  useEffect(() => {
    const codItem = form.watch("codItem_item" as any);

    if (!skuEditado && codItem && !defaultValues?.["sku_item"]) {
      form.setValue("sku_item", codItem);
    }
  }, [form.watch("codItem_item" as any)]);
  return (
    <form
      onSubmit={handleSubmit(onSubmitInversores)}
      {...rest}
      className="flex flex-row"
    >
      {fase && (
        <div className="p-3">
          <div>Tensões</div>
          <table key={fase}>
            <tbody>
              {(fase == "1" ? tensoesMonofasico : tensoes).map(
                (tensao: string, index: number) => (
                  <tr key={index}>
                    <td>
                      <Input
                        type="checkbox"
                        checked={tensoes_item.includes(tensao)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            if (!tensoes_item.includes(tensao)) {
                              setTensoes_item((prev) => [...prev, tensao]);
                            }
                          } else {
                            setTensoes_item((prev) => [
                              ...prev.filter((t) => t != tensao),
                            ]);
                          }
                        }}
                      />
                    </td>
                    <td className="p-1">{tensao}V</td>
                  </tr>
                )
              )}
            </tbody>
          </table>
        </div>
      )}
      <div className="flex-1">
        <InputGroup>
          <Input
            label="Código Interno"
            name="codItem_item"
            formulario={form}
            mascara="numerico"
            error={"Preencha o Código"}
            required
            defaultValue={defaultValues && defaultValues?.["codItem_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "codItem_item"
            )}
          />
          <Input
            label="SKU"
            name="sku_item"
            formulario={form}
            defaultValue={defaultValues && defaultValues?.["sku_item"]}
            onChange={() => setSkuEditado(true)}
            disabled={disabledFields?.some(
              (field: string) => field == "sku_item"
            )}
          />
          <InputSelectComponent
            // skipEffect
            label={
              <DistribuidorLabel
                text="Distribuidor/Fornecedor"
                hasAddButton={origem !== "itemComposto"}
                onAddClick={handleOpenDistribuidorModal}
              />
            }
            name="codDistribuidor_item"
            formulario={form}
            options={distribuidores?.map((e: any) => ({
              value: e["id_distribuidor"],
              label: e["nome_distribuidor"],
            }))}
            defaultValue={
              defaultValues && defaultValues?.["codDistribuidor_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "codDistribuidor_item"
            )}
            onChange={(e: any) => {
              const descricao_item = form.control._formValues?.descricao_item;
              let {
                codFabricante_item,
                potencia_item,
                modelo_item,
                codDistribuidor_item,
                tipoStringInversor_item,
              } = form?.control?._formValues;
              codFabricante_item = codFabricante_item?.label;
              codDistribuidor_item = e?.label;
              tipoStringInversor_item = tipoStringInversor_item?.label;
              form.setValue(
                "descricao_item",
                `${tipoInversorItem == "micro_inversor" ? "Microinversor " : `Inversor ${tipoStringInversor_item ? tipoStringInversor_item.replace("INVERSOR STRING ", "") + " " : ""}`}${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}kW ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
              );
            }}
            required
            error="Informe o Distribuidor"
          />
          <InputSelectComponent
            // skipEffect
            label={
              <FabricanteLabel
                text="Fabricante"
                hasAddButton={origem !== "itemComposto"}
                onAddClick={handleOpenFabricanteModal}
              />
            }
            name="codFabricante_item"
            formulario={form}
            options={fabricantes?.map((e: any) => ({
              value: e["id_fabricante"],
              label: e["nome_fabricante"],
            }))}
            defaultValue={
              defaultValues && defaultValues?.["codFabricante_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "codFabricante_item"
            )}
            onChange={(e: any) => {
              const descricao_item = form.control._formValues?.descricao_item;
              let {
                codFabricante_item,
                potencia_item,
                modelo_item,
                codDistribuidor_item,
                tipoStringInversor_item,
              } = form?.control?._formValues;
              codFabricante_item = e?.label;
              codDistribuidor_item = codDistribuidor_item?.label;
              tipoStringInversor_item = tipoStringInversor_item?.label;
              form.setValue(
                "descricao_item",
                `${tipoInversorItem == "micro_inversor" ? "Microinversor " : `Inversor ${tipoStringInversor_item ? tipoStringInversor_item.replace("INVERSOR STRING ", "") + " " : ""}`}${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}kW ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
              );
            }}
            required
            error="Informe o Fabricante"
          />
          <Input
            label="Preço Unitário"
            name="precoUnitario_item"
            formulario={form}
            prefix={"R$"}
            mascara="numero"
            defaultValue={
              defaultValues && defaultValues?.["precoUnitario_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "precoUnitario_item"
            )}
            required
            error="Preencha o Valor"
            // onChange={(event: any) => {
            //   event.target.value == "0,00"
            //     ? (event.target.value = "")
            //     : (event.target.value = event.target.value);
            // }}
          />
          <Input
            label="Potencia(kW)"
            name="potencia_item"
            formulario={form}
            mascara="numero"
            defaultValue={defaultValues && defaultValues?.["potencia_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "potencia_item"
            )}
            required
            error="Preencha a Potencia"
            maxLength={6}
            onChange={(event: any) => {
              event.target.value == "0,00"
                ? (event.target.value = "")
                : (event.target.value = event.target.value);

              const descricao_item = form.control._formValues?.descricao_item;
              let {
                codFabricante_item,
                potencia_item,
                modelo_item,
                codDistribuidor_item,
                tipoStringInversor_item,
              } = form?.control?._formValues;
              codFabricante_item = codFabricante_item?.label;
              codDistribuidor_item = codDistribuidor_item?.label;
              tipoStringInversor_item = tipoStringInversor_item?.label;
              potencia_item = event.target.value;
              form.setValue(
                "descricao_item",
                `${tipoInversorItem == "micro_inversor" ? "Microinversor " : `Inversor ${tipoStringInversor_item ? tipoStringInversor_item.replace("INVERSOR STRING ", "") + " " : ""}`}${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}kW ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
              );
            }}
          />
        </InputGroup>
        <InputGroup>
          <InputSelectComponent
            label="Fase(V)"
            name="fases_item"
            options={[
              { value: "1", label: "Monofásico" },
              { value: "3", label: "Trifásico" },
            ]}
            formulario={form}
            defaultValue={defaultValues && defaultValues?.["fases_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "fases_item"
            )}
            required
            error="Informe a Fase"
            onChange={(e: any) => {
              setFase(e.value);
              setTensoes_item([]);
            }}
          />
          {/* Criar uma lista de tensões para ele poder marcar quantas quiser */}
          {/* <InputSelectComponent
          label="Tensão"
          name="tensao_item"
          options={[
            { label: "110V", value: "110" },
            { label: "115V", value: "115" },
            { label: "120V", value: "120" },
            { label: "127V", value: "127" },
            { label: "208V", value: "208" },
            { label: "220V", value: "220" },
            { label: "254V", value: "254" },
            { label: "380V", value: "380" },
            { label: "440V", value: "440" },
          ]}
          formulario={form}
          defaultValue={defaultValues && defaultValues?.["tensao_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "tensao_item"
          )}
          required
          error="Informe ao menos uma Tensão"
        /> */}
          <InputSelectComponent
            label="Tipo de Inversor"
            name="tipoInversor_item"
            options={tiposInversores}
            formulario={form}
            defaultValue={defaultValues && defaultValues?.["tipoInversor_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "tipoInversor_item"
            )}
            required
            error="Informe o Tipo do Inversor"
            onChange={(e: any) => {
              setTipoInversorItem(e.value);
              if (e.value != "micro_inversor") {
                form.setYupSchema((prev) => {
                  const fields: any = prev.fields;
                  delete fields["qtdModulos_max_item"];
                  delete fields["strings_item"];
                  prev.fields = fields;
                  return prev;
                });
                form.setValue("strings_item", "0");
                form.setValue("qtdModulos_max_item", "");
                form.setValue("tipoStringInversor_item", "");
              } else {
                form.setValue("tipoStringInversor_item", {
                  value: "microinversor",
                  label: "Microinversor",
                });
              }
              const descricao_item = form.control._formValues?.descricao_item;
              let {
                codFabricante_item,
                potencia_item,
                modelo_item,
                codDistribuidor_item,
                tipoStringInversor_item,
              } = form?.control?._formValues;
              codFabricante_item = codFabricante_item?.label;
              codDistribuidor_item = codDistribuidor_item?.label;
              tipoStringInversor_item = tipoStringInversor_item?.label;
              form.setValue(
                "descricao_item",
                `${e.value == "micro_inversor" ? "Microinversor " : `Inversor ${tipoStringInversor_item ? tipoStringInversor_item.replace("INVERSOR STRING ", "") + " " : ""}`}${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}kW ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
              );
            }}
          />
          <InputSelectComponent
            label="Tipo de String"
            name="tipoStringInversor_item"
            options={tiposStrings?.filter((e: any) =>
              tipoInversorItem == "micro_inversor"
                ? e.value == "microinversor"
                : e.value != "microinversor"
            )}
            formulario={form}
            defaultValue={
              defaultValues && defaultValues?.["tipoStringInversor_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "tipoStringInversor_item"
            )}
            required
            error="Informe o Tipo de String do Inversor"
            skipEffect
            width="min-w-[243px] w-full"
            onChange={(e: any) => {
              setStringSelected(e.value);
              const descricao_item = form.control._formValues?.descricao_item;
              let {
                codFabricante_item,
                potencia_item,
                modelo_item,
                codDistribuidor_item,
                tipoStringInversor_item,
              } = form?.control?._formValues;
              codFabricante_item = codFabricante_item?.label;
              codDistribuidor_item = codDistribuidor_item?.label;
              tipoStringInversor_item = e.label;
              form.setValue(
                "descricao_item",
                `${e.value == "micro_inversor" ? "Microinversor " : `Inversor ${tipoStringInversor_item ? tipoStringInversor_item.replace("INVERSOR STRING ", "") + " " : ""}`}${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}kW ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
              );
            }}
          />
          {tipoInversorItem == "micro_inversor" ? (
            <Input
              label={
                <div className="flex flex-row items-center gap-1">
                  <div>Quantidade de Módulos Máxima</div>
                  <Button
                    type="button"
                    className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                    onClick={(e: any) => {
                      e.stopPropagation();
                      handleSweetAlert({
                        icon: "info",
                        title: "Quantidade de Módulos Máxima",
                        showDenyButton: false,
                        confirmButtonText: "Ok",
                        html: `
                          <div class="flex flex-col gap-2">
                            <div>
                              <div class="font-bold">
                                Necessário para calcular quantos Microinversores serão necessários usar em uma proposta.
                              </div>
                              <div class="italic text-meta-1 flex flex-col gap-2 items-center">
                                Na proposta com kit manual com microinversores, após a obtenção da quantidade de módulos esse 
                                valor é dividido pela quantidade de módulos máxima suportada pelo microinversor, 
                                arredondamos o valor para o número inteiro seguinte mais próximo e obtemos a quantidade de microinversores necessários
                              </div>
                            </div>
                          </div>
                        `,
                      });
                    }}
                  >
                    <Info />
                  </Button>
                </div>
              }
              name="qtdModulos_max_item"
              formulario={form}
              defaultValue={
                defaultValues && defaultValues?.["qtdModulos_max_item"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "qtdModulos_max_item"
              )}
              required
              error="Informe a quantidade máxima"
              schema={yup
                .number()
                .required("Informe a quantidade máxima")
                .transform((val) => +FormatFields.desformatarNumeros(val || 0))
                .min(1, "Valor Mínimo: 1")
                .max(100, "Valor Máximo: 100")}
              key={1}
            />
          ) : (
            <Input
              label="Qtd Máx de Strings"
              name="strings_item"
              formulario={form}
              mascara="numerico"
              defaultValue={defaultValues && defaultValues?.["strings_item"]}
              disabled={disabledFields?.some(
                (field: string) => field == "strings_item"
              )}
              required
              error="Informe o número de strings"
              schema={yup
                .number()
                .required("Informe os Strings")
                .transform((val) => +FormatFields.desformatarNumeros(val || 0))
                .when("tipoInversor_item", ([tipoInversor_item], schema) => {
                  return tipoInversor_item == "micro_inversor"
                    ? schema.min(0, "Valor mínimo: 0")
                    : schema.min(1, "Valor Mínimo: 1");
                })
                // .min(0, "Valor Mínimo: 1")
                .max(100, "Valor Máximo: 100")}
              key={2}
            />
          )}

          {/* <Input
          label="Voltagem(V)"
          name="voltagemCA_item"
          formulario={form}
          mascara="numerico"
          defaultValue={defaultValues && defaultValues?.["voltagemCA_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "voltagemCA_item"
          )}
          required
          error="Informe a Voltagem"
        /> */}
          <Input
            label="Modelo do Inversor"
            name="modelo_item"
            formulario={form}
            defaultValue={defaultValues && defaultValues?.["modelo_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "modelo_item"
            )}
            onChange={(e: any) => {
              const descricao_item = form.control._formValues?.descricao_item;
              let {
                codFabricante_item,
                potencia_item,
                modelo_item,
                codDistribuidor_item,
                tipoStringInversor_item,
              } = form?.control?._formValues;
              codFabricante_item = codFabricante_item?.label;
              codDistribuidor_item = codDistribuidor_item?.label;
              tipoStringInversor_item = tipoStringInversor_item?.label;
              modelo_item = e.target.value;
              form.setValue(
                "descricao_item",
                `${tipoInversorItem == "micro_inversor" ? "Microinversor " : `Inversor ${tipoStringInversor_item ? tipoStringInversor_item.replace("INVERSOR STRING ", "") + " " : ""}`}${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}kW ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
              );
            }}
          />
        </InputGroup>
        <InputGroup>
          <Input
            label="Garantia"
            name="garantia_item"
            formulario={form}
            mascara="numerico"
            prefix="meses"
            maxLength={3}
            defaultValue={defaultValues && defaultValues?.["garantia_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "garantia_item"
            )}
          />
          <Input
            label="Underload (%)"
            name="underload_item"
            formulario={form}
            mascara="numero"
            // prefix={"%"}
            defaultValue={
              (defaultValues && defaultValues?.["underload_item"]) || "0,00"
            }
            disabled={disabledFields?.some(
              (field: string) => field == "underload_item"
            )}
            required
            error="Informe o underload"
            schema={yup
              .number()
              .required("Informe o underload")
              .transform((val) => +FormatFields.desformatarNumeros(val || 0))
              .min(0, "Valor Mínimo: 0")
              .max(100, "Valor Máximo: 100")}
          />
          <Input
            label="Overload (%)"
            name="overload_item"
            formulario={form}
            mascara="numero"
            // prefix={"%"}
            defaultValue={defaultValues && defaultValues?.["overload_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "overload_item"
            )}
            required
            error="Informe o overload"
            schema={yup
              .number()
              .required("Informe o overload")
              .transform((val) => +FormatFields.desformatarNumeros(val || 0))
              .min(100, "Valor Mínimo: 100")}
          />
          <Input
            label="MPPTs"
            name="mppts_item"
            formulario={form}
            mascara="numerico"
            defaultValue={defaultValues && defaultValues?.["mppts_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "mppts_item"
            )}
            required
            error="Informe o MPPTs"
            schema={yup
              .number()
              .required("Informe os MPPTs")
              .transform((val) => +FormatFields.desformatarNumeros(val || 0))
              .min(1, "Valor Mínimo: 1")
              .max(100, "Valor Máximo: 100")}
          />
        </InputGroup>
        <InputGroup>
          <Input
            label="Corrente Máxima de Entrada CC"
            name="correnteEntrada_item"
            formulario={form}
            prefix="A"
            mascara="numerico"
            defaultValue={
              defaultValues && defaultValues?.["correnteEntrada_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "correnteEntrada_item"
            )}
            required
            error="Informe a Corrente Máxima de Entrada CC"
          />
          <Input
            label="Corrente Máxima de Saída CA"
            name="correnteSaida_item"
            formulario={form}
            mascara="numerico"
            prefix="A"
            defaultValue={
              defaultValues && defaultValues?.["correnteSaida_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "correnteSaida_item"
            )}
            required
            error="Informe a Corrente Máxima de Saída CA"
          />
          <div className="flex flex-col gap-2 bg-blue-300/20 rounded p-2 w-full">
            <InputSelectComponent
              label="ID String CC"
              name="idStringCC_item"
              formulario={form}
              options={stringboxes
                ?.filter(
                  (b: any) =>
                    b.tipoString_item === "1" &&
                    (b.fases_item == fase || b.fases_item == "*")
                )
                .map((box: any) => ({
                  value: box.id_item,
                  label: box.id_item + " - " + box.descricao_item,
                }))}
              onChange={(e: any) => setIdStringCC(e.value)}
              defaultValue={idStringCC}
            />
            {idStringCC && (
              <Input
                name="qtdStringCC_item"
                label="QTD"
                formulario={form}
                mascara="numerico"
                inputClassName="bg-white"
                defaultValue={
                  (defaultValues && defaultValues?.["qtdStringCC_item"]) || "1"
                }
              />
            )}
          </div>
          <div className="flex flex-col gap-2 bg-blue-600/10 rounded p-2 w-full">
            <InputSelectComponent
              label="ID String CA"
              name="idStringCA_item"
              formulario={form}
              options={stringboxes
                ?.filter(
                  (b: any) =>
                    (b.tipoString_item === "0" && b.fases_item == fase) ||
                    b.fases_item == "*"
                )
                .map((box: any) => ({
                  value: box.id_item,
                  label: box.id_item + " - " + box.descricao_item,
                }))}
              onChange={(e: any) => setIdStringCA(e.value)}
              defaultValue={idStringCA}
            />
            {idStringCA && (
              <Input
                name="qtdStringCA_item"
                label="QTD"
                formulario={form}
                mascara="numerico"
                inputClassName="bg-white"
                defaultValue={
                  (defaultValues && defaultValues?.["qtdStringCA_item"]) || "1"
                }
              />
            )}
          </div>
        </InputGroup>
        {(stringSelected === "inversor_off_grid" ||
          stringSelected === "inversor_hibrido") && (
          <InputGroup>
            <Input
              label="Qtd Baterias Lítio"
              formulario={form}
              mascara="numerico"
              name="qtdBateriasLitio_item"
              defaultValue={
                defaultValues && defaultValues?.["qtdBateriasLitio_item"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "qtdBateriasLitio_item"
              )}
            />
            <InputSelectComponent
              label="ID Bateria Lítio"
              name="idBateriaLitio_item"
              formulario={form}
              options={baterias
                ?.filter((b: any) => b.tipoBateria_item === "0")
                .map((box: any) => ({
                  value: box.id_item,
                  label: box.descricao_item + " " + box.tensoes_item + "V",
                }))}
              // onChange={(e: any) => setIdStringCC(e.value)}
              defaultValue={
                defaultValues && defaultValues?.["idBateriaLitio_item"]
              }
            />

            <Input
              label="Qtd Baterias Chumbo Ácido"
              formulario={form}
              mascara="numerico"
              name="qtdBateriasChumboAcido_item"
              defaultValue={
                defaultValues && defaultValues?.["qtdBateriasChumboAcido_item"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "qtdBateriasChumboAcido_item"
              )}
            />
            <InputSelectComponent
              label="ID Bateria Chumbo"
              name="idBateriaChumbo_item"
              formulario={form}
              options={baterias
                ?.filter((b: any) => b.tipoBateria_item === "1")
                .map((box: any) => ({
                  value: box.id_item,
                  label: box.descricao_item + " " + box.amperagem_item + "AH",
                }))}
              // onChange={(e: any) => setIdStringCA(e.value)}
              defaultValue={
                defaultValues && defaultValues?.["idBateriaChumbo_item"]
              }
            />
          </InputGroup>
        )}
        <InputGroup>
          <Input
            label="Descrição"
            name="descricao_item"
            type="textarea"
            formulario={form}
            defaultValue={defaultValues && defaultValues?.["descricao_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "descricao_item"
            )}
            required
            error="Preencha a Descrição"
          />
        </InputGroup>
        <InputGroup align="center">
          {fileInputs.map((input) => (
            <Input
              key={input.name}
              label={input.label}
              name={input.name}
              type={"multiple-file"}
              accept="image/*"
              dynamic={!!input.isMultiple}
              defaultValue={input.base64State}
              onInputProp={(event: any) => {
                const inputElement = event.target as HTMLInputElement;
                if (inputElement.files && inputElement.files.length > 0) {
                  const files = Array.from(inputElement.files);

                  const base64Promises = files.map((file) => {
                    return new Promise<string>((resolve, reject) => {
                      const reader = new FileReader();
                      reader.onloadend = () => resolve(reader.result as string);
                      reader.onerror = reject;
                      reader.readAsDataURL(file);
                    });
                  });

                  Promise.all(base64Promises).then((base64Array) => {
                    input.setFile((prev: any) => [
                      ...(input.isMultiple ? prev || [] : []),
                      ...files,
                    ]);

                    input.setBase64((prev: any) => {
                      const novas = [
                        ...(input.isMultiple ? prev || [] : []),
                        ...base64Array,
                      ];
                      const unicas = Array.from(new Set(novas));
                      form.setValue(input.name as never, unicas as never);
                      return unicas;
                    });
                  });
                }
                return 1;
              }}
              onRemoveFile={(idBase64: any) => {
                input.setBase64((prev: any) =>
                  (input.isMultiple ? prev : [prev]).filter(
                    (b: any) => b !== idBase64
                  )
                );
                form.setValue(
                  input.name as never,
                  (input.isMultiple
                    ? input.base64State.filter((b: any) => b !== idBase64)
                    : "") as never
                );
              }}
            />
          ))}
        </InputGroup>

        {children}

        <DistribuidorModal
          isOpen={showDistribuidorModal}
          onClose={handleCloseDistribuidorModal}
          onSubmit={handleDistribuidorSubmit}
          isLoading={isDistribuidorLoading}
        />

        <FabricanteModal
          isOpen={showFabricanteModal}
          onClose={handleCloseFabricanteModal}
          onSubmit={handleFabricanteSubmit}
          isLoading={isFabricanteLoading}
        />
      </div>
    </form>
  );
};

export default FormInversor;