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 { listarOrientacoesSolares } from "@/requests/common/OrientacoesSolares/listarInclinacoesTelhado";
import { listarCategoriasTelhados } from "@/requests/CRUD/CategoriasTelhado/listarCategoriaTelhado";
import { atualizaDadosClienteAmpliacao } from "@/requests/CRUD/ColetaDados/editarColeta";
import { listarEstruturas } from "@/requests/CRUD/EstruturaFixacao/listarEstruturaFixacao";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import * as yup from "yup";
const mapToOptions = (arr: any, label: any, value: any) =>
  arr.map((item: any) => ({ label: item[label], value: item[value] }));

const InformacoesInfoSistema = ({ handleSendInfo }: any) => {
  const [inversoresInstalados, setInversoresInstalados] = useState("0");
  const [estruturas, setEstruturas] = useState<any[]>([]);
  const [categoriasTelhados, setCategoriasTelhados] = useState<any[]>([]);
  const [orientacoesSolares, setOrientacoesSolares] = useState<any[]>([]);
  const [categoriaEscolhida, setCategoriaEscolhida] = useState("");
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, isSubmitting, ...form } = GetForm(
    yupSchema,
    setYupSchema
  );

  useEffect(() => {
    listarOrientacoesSolares().then(setOrientacoesSolares),
      listarCategoriasTelhados().then(setCategoriasTelhados),
      listarEstruturas().then((arr: any) =>
        setEstruturas(
          arr.filter((estrutura: any) => estrutura.status_estrutura == 1)
        )
      );
  }, []);

  return (
    <form onSubmit={handleSubmit(handleSendInfo)}>
      <h3 className="text-black text-center mb-5 font-medium">
        Preencha os campos obrigatórios <span className="text-danger">(*)</span>{" "}
        para seguir adiante
      </h3>
      <InputGroup className="grid grid-cols-3">
        <Input
          formulario={form}
          required
          name="nome_integrador_ampliacao"
          label="Nome do integrador que instalou"
          error="Preencha este campo"
        />
        <Input
          formulario={form}
          required
          name="qtdModulos_ampliacao"
          label="Qtd módulos instalados"
          error="Preencha este campo"
        />
        <Input
          formulario={form}
          required
          name="potenciaModulos_ampliacao"
          label="Potência módulo instalado"
          mascara="numero"
          error="Preencha este campo"
        />
        <Input
          formulario={form}
          required
          name="qtdInversores_ampliacao"
          label="Qtd inversores instalados"
          onChange={(e) => setInversoresInstalados(e.target.value)}
          mascara="numerico"
          error="Preencha este campo"
        />
        <Input
          formulario={form}
          required
          name="potenciaInversores_ampliacao"
          label="Potência inversorres instalados"
          mascara="numero"
          error="Preencha este campo"
        />
        {/* {Array.from({ length: Number(inversoresInstalados) }, (_, index) => (
          <Input
            key={index}
            formulario={form}
            name={`potenciaInversores_ampliacao.${index}`}
            label={`Potência inversor ${index + 1} instalado`}
            mascara="numero"
          />
        ))} */}
        <InputSelectComponent
          formulario={form}
          required
          name="categoriaInstalacao_ampliacao"
          label="Categoria de Instalação"
          error="Preencha este campo"
          options={mapToOptions(
            categoriasTelhados,
            "nome_categoria_telhado",
            "id_categoria_telhado"
          )}
          onChange={(e: any) => setCategoriaEscolhida(e.value)}
        />
        <InputSelectComponent
          formulario={form}
          required
          name="estrutura_ampliacao"
          label="Estrutura do Telhado"
          error="Preencha este campo"
          options={mapToOptions(
            estruturas.filter(
              (estrutura: any) =>
                estrutura.cod_tipo_instalacao == categoriaEscolhida
            ),
            "nome_estrutura",
            "id_estrutura"
          )}
        />
        <InputSelectComponent
          formulario={form}
          required
          name="orientacoes_integrador_ampliacao"
          label="Orientações que foi instalado"
          error="Preencha este campo"
          options={mapToOptions(
            orientacoesSolares,
            "nome_orientacao",
            "id_orientacao"
          )}
        />
      </InputGroup>
      <div className="flex justify-center w-full mt-4">
        <Button disabled={isSubmitting}>Salvar</Button>
      </div>
    </form>
  );
};

export default InformacoesInfoSistema;