import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import FormInversor from "@/pages/CXESCAD026/Inversor/FormInversor";
import { listarItensKitsPorTipo } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";

import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import React, { useEffect, useState } from "react";

interface InversorModalProps {
  isOpen: boolean;
  isLoading: boolean;
  onClose: () => void;
  onSubmit: (formData: any) => Promise<void>;
}

export const InversorModal: React.FC<InversorModalProps> = ({
  isOpen,
  isLoading,
  onClose,
  onSubmit,
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [tiposItens, setTiposItens] = useState<any[]>([]);
  const [stringboxes, setStringboxes] = useState<any>([]);
  const [baterias, setBaterias] = useState<any>([]);

  const tensoes = [
    "110",
    "115",
    "120",
    "127",
    "208",
    "220",
    "240",
    "254",
    "380",
    "440",
  ];
  const tiposInversores = [
    { value: "micro_inversor", label: "Microinversor" },
    { value: "inversor_parede", label: "Inversor de Parede" },
  ];

  const tiposStrings = [
    { value: "microinversor", label: "Microinversor" },
    { value: "inversor_on_grid", label: "INVERSOR STRING ON-GRID" },
    { value: "inversor_off_grid", label: "INVERSOR STRING OFF-GRID" },
    { value: "inversor_hibrido", label: "INVERSOR STRING HÍBRIDO" },
  ];
  useEffect(() => {
    Promise.all([
      listarItensKitsPorTipo("13").then(setStringboxes),
      listarItensKitsPorTipo("16").then(setBaterias),
    ]).then(() => setIsLoaded(true));
  }, []);
  if (!isOpen && !isLoaded) return null;

  return (
    <ModalComponente
      opened={isOpen}
      onClose={onClose}
      header="Cadastrar Inversor"
      size="md"
      hasSaveButton={false}
      hasForm={false}
    >
      <FormInversor
        onSubmitFunction={onSubmit}
        isLoading={isLoading}
        tiposItens={tiposItens}
        origem={"itemComposto"}
        stringboxes={stringboxes}
        tiposInversores={tiposInversores}
        baterias={baterias}
        tiposStrings={tiposStrings}
        tensoes={tensoes}
      >
        <div className="w-full flex flex-row justify-center p-4">
          <Button type="submit" className="text-sm w-29">
            Salvar
          </Button>
        </div>
      </FormInversor>
    </ModalComponente>
  );
};