import LoaderSun from "@/components/common/Loader/LoaderSun";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import Navbar from "@/components/Navbar/Navbar";
import {
  listagemItens,
  listarComponentesKitManual,
} from "@/requests/CRUD/KitManual/listarKitManual";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import pluralizePtBr from "@/utils/plural";
import { Fragment, useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import * as yup from "yup";

type Item = {
  tipoTelhado_componente_kit: any;
  tipo_item: string;
  nome_item: string;
  qtd_item: string;
  preco_unitario: string | null;
  potencia_item: string | null;
  sigla_tipo_item: string;
};

type Valores = {
  [key: string]: {
    precoUnitario: string | null;
    qtd: string;
    valorTotal: number;
  };
};

const FormKitManual = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  const [dadosInversor, setDadosInversor] = useState([]);
  const [dadosModulos, setDadosModulos] = useState([]);
  const [dadosCabos, setDadosCabos] = useState([]);
  const [dadosTerminal, setDadosTerminal] = useState([]);
  const [dadosStringBox, setDadosStringBox] = useState([]);
  const [dadosConector, setDadosConector] = useState([]);
  const [dadosDisjuntor, setDadosDisjuntor] = useState([]);
  const [dadosAluminio, setDadosAluminio] = useState([]);
  const [dadosAterramento, setDadosAterramento] = useState([]);
  const [dadosMonitoramento, setDadosMonitoramento] = useState([]);
  const [dadosCeramico, setDadosCeramico] = useState([]);
  const [dadosMetalico, setDadosMetalico] = useState([]);
  const [dadosLaje, setDadosLaje] = useState([]);
  const [dadosSolo, setDadosSolo] = useState([]);
  const [dadosEstacao, setDadosEstacao] = useState([]);
  const [dadosGaragem, setDadosGaragem] = useState([]);
  const [dadosFibrocimento, setDadosFibrocimento] = useState([]);
  const [dadosDps, setDadosDps] = useState([]);
  const [dadosSuporte, setDadosSuporte] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [showContent, setShowContent] = useState(0);
  const [qtdModulo, setQtdModulo] = useState<any>();
  const { valuesSession } = useAuth();
  const { session } = valuesSession();

  const [newDefaultValues, setNewDefaultValues] = useState<any>([]);

  const [potenciaKit, setPotenciaKit] = useState<any>(0);
  const [lojasOptions, setLojasOptions] = useState<any>([]);
  const [precos, setPrecos] = useState<any>({});

  const handleChange = (campo: string, valor: any, tipo: "preco" | "qtd") => {
    const novosPrecos = { ...precos };
    const precoUnitario =
      tipo === "preco" ? valor : novosPrecos[campo]?.precoUnitario;
    const qtd = tipo === "qtd" ? valor : novosPrecos[campo]?.qtd;

    novosPrecos[campo] = {
      precoUnitario,
      qtd,
      valorTotal: Number(qtd) * Number(precoUnitario || 0),
    };

    const valorTotalDeTodosOsItens = Object.entries(novosPrecos)
      .filter(([key]) => key !== "ValorTotal")
      .reduce(
        (total, [_, item]: [string, any]) => total + (item.valorTotal || 0),
        0
      );

    // Adiciona o valor total ao objeto novosPrecos
    novosPrecos["ValorTotal"] = {
      precoUnitario: null,
      qtd: "",
      valorTotal: valorTotalDeTodosOsItens,
    };

    form.setValue(
      "preco_kit" as never,
      `${novosPrecos["ValorTotal"].valorTotal >= 0
        ? novosPrecos["ValorTotal"].valorTotal.toLocaleString("pt-BR", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })
        : "0,00"
      }` as never
    );

    setPrecos(novosPrecos);
  };

  useEffect(() => {
    listarLojas(session.id_usuario).then((res) => {
      const idsLojaUsuario = session.id_loja_usuario
        .split(",")
        .map((id: any) => id.trim());

      const filtered = res?.filter((loja: any) =>
        idsLojaUsuario.includes(loja.id_loja.toString())
      );

      setLojasOptions(filtered);
    });
    listarComponentesKitManual(defaultValues["id_kit"]).then((res) => {
      const agrupados = res["componentesKit"].reduce((acc: any, item: Item) => {
        const key =
          item.sigla_tipo_item === "estruturas"
            ? item.tipoTelhado_componente_kit
            : item.sigla_tipo_item;

        if (!acc[key]) {
          acc[key] = {
            qtd_total: 0,
            valor_total: 0,
            itens: [],
          };
        }

        acc[key].qtd_total += Number(item.qtd_item);
        acc[key].valor_total +=
          Number(item.qtd_item) * Number(item.preco_unitario || 0);
        acc[key].itens.push(item);

        return acc;
      }, {});

      const valores: Valores = Object.keys(agrupados).reduce(
        (acc: Valores, key: string) => {
          const grupo = agrupados[key];
          if (grupo.itens.length > 1) {
            grupo.itens.forEach((item: Item, index: number) => {
              acc[`${key}${index + 1}`] = {
                precoUnitario: item.preco_unitario,
                qtd: item.qtd_item,
                valorTotal:
                  Number(item.qtd_item) * Number(item.preco_unitario || 0),
              };
            });
          } else {
            acc[key] = {
              precoUnitario: grupo.itens[0].preco_unitario,
              qtd: grupo.qtd_total,
              valorTotal: grupo.valor_total,
            };
          }
          return acc;
        },
        {}
      );

      // Calcula o valor total de todos os itens
      const valorTotalDeTodosOsItens = Object.values(valores).reduce(
        (total, item) => total + item.valorTotal,
        0
      );

      // Adiciona o valor total ao objeto valores
      valores["ValorTotal"] = {
        precoUnitario: null,
        qtd: "",
        valorTotal: valorTotalDeTodosOsItens,
      };

      setPrecos(valores);
      const modulo = res["componentesKit"].find(
        (e: any) => e.sigla_tipo_item == "modulos"
      );
      setPotenciaKit(modulo?.potencia_item || 0);
      setNewDefaultValues(res["componentesKit"]);
    });
    const potenciaTotal = (+potenciaKit * +qtdModulo) / 1000;
    form.setValue("potencia_kit" as never, potenciaTotal as never);
  }, []);

  useEffect(() => {
    const potenciaTotal = (+potenciaKit * +qtdModulo) / 1000;
    form.setValue("potencia_kit" as never, potenciaTotal as never);
  }, [potenciaKit, qtdModulo]);

  const dadosListagem = [
    {
      nomeState: setDadosModulos,
      nomeBd: "modulos",
      nomeStatus: "status_item",
      nomeDefault: "modulos",
    },
    {
      nomeState: setDadosInversor,
      nomeBd: "inversores",
      nomeStatus: "status_item",
      nomeDefault: "inversores",
    },
    {
      nomeState: setDadosCabos,
      nomeBd: "cabos",
      nomeStatus: "status_item",
      nomeDefault: "cabos",
    },
    {
      nomeState: setDadosConector,
      nomeBd: "conectores",
      nomeStatus: "status_item",
      nomeDefault: "conectores",
    },
    {
      nomeState: setDadosAluminio,
      nomeBd: "perfis_aluminio",
      nomeStatus: "status_item",
      nomeDefault: "perfis_aluminio",
    },
    {
      nomeState: setDadosAterramento,
      nomeBd: "aterramentos",
      nomeStatus: "status_item",
      nomeDefault: "aterramentos",
    },
    {
      nomeState: setDadosSuporte,
      nomeBd: "suportes",
      nomeStatus: "status_item",
      nomeDefault: "suportes",
    },
    {
      nomeState: setDadosDisjuntor,
      nomeBd: "disjuntores",
      nomeStatus: "status_item",
      nomeDefault: "disjuntores",
    },
    {
      nomeState: setDadosStringBox,
      nomeBd: "stringbox",
      nomeStatus: "status_item",
      nomeDefault: "stringbox",
    },
    {
      nomeState: setDadosTerminal,
      nomeBd: "terminais",
      nomeStatus: "status_item",
      nomeDefault: "terminal",
    },
    {
      nomeState: setDadosMonitoramento,
      nomeBd: "monitoramento",
      nomeStatus: "status_item",
      nomeDefault: "monitoramento",
    },
    {
      nomeState: setDadosEstacao,
      nomeBd: "estacao",
      nomeStatus: "status_item",
      nomeDefault: "estacao",
    },
    {
      nomeState: setDadosDps,
      nomeBd: "dps",
      nomeStatus: "status_item",
      nomeDefault: "dps",
    },
  ];

  const dadosListagemEstruturas = [
    {
      nomeState: setDadosCeramico,
      nomeBd: "ceramico",
    },
    {
      nomeState: setDadosMetalico,
      nomeBd: "metalico",
    },
    {
      nomeState: setDadosLaje,
      nomeBd: "laje",
    },
    {
      nomeState: setDadosFibrocimento,
      nomeBd: "fibrocimento",
    },
    {
      nomeState: setDadosSolo,
      nomeBd: "solo",
    },
    {
      nomeState: setDadosGaragem,
      nomeBd: "garagem",
    },
  ];

  useEffect(() => {
    dadosListagem.map((data) => {
      listagemItens(`${data.nomeBd}`).then((res) => {
        data.nomeState(res.filter((e: any) => e[data.nomeStatus] == 1));
      });
    });
    dadosListagemEstruturas.map((data) => {
      listagemItens("estruturas")
        .then((res) => {
          data.nomeState(
            res.filter(
              (e: any) =>
                e["status_item"] == 1 &&
                e["tipoTelhado_item"] == `${data.nomeBd}`
            )
          );
        })
        .finally(() => {
          setLoaded(true);
        });
    });
  }, [newDefaultValues]);

  function onSubmitKit(data: FieldValues) {
    onSubmitFunction(data);
  }

  const dadosGerais = [
    { nome: "Inversor", nomeM: "inversor", nomeFunction: dadosInversor },
    { nome: "Cabo", nomeM: "cabo", nomeFunction: dadosCabos },
    { nome: "Disjuntor", nomeM: "disjuntor", nomeFunction: dadosDisjuntor },
    { nome: "Conector", nomeM: "conector", nomeFunction: dadosConector },
  ];
  const dadosExtras = [
    {
      nome: "Aluminio",
      nomeM: "aluminio",
      nomeFunction: dadosAluminio,
      nomeDefault: "perfis_aluminio",
    },
    {
      nome: "Suporte",
      nomeM: "suporte",
      nomeFunction: dadosSuporte,
      nomeDefault: "suportes",
    },
    {
      nome: "Aterramento",
      nomeM: "aterramento",
      nomeFunction: dadosAterramento,
      nomeDefault: "aterramentos",
    },
    { nome: "Dps", nomeM: "dps", nomeFunction: dadosDps, nomeDefault: "dps" },
    {
      nome: "Monitoramento",
      nomeM: "monitoramento",
      nomeFunction: dadosMonitoramento,
      nomeDefault: "monitoramento",
    },
    {
      nome: "Estacao",
      nomeM: "estacao",
      nomeFunction: dadosEstacao,
      nomeDefault: "estacao",
    },
  ];
  const dadosExtras2 = [
    {
      nome: "Terminal",
      nomeM: "terminal",
      nomeFunction: dadosTerminal,
      nomeDefault: "terminais",
    },
    {
      nome: "Stringbox",
      nomeM: "stringbox",
      nomeFunction: dadosStringBox,
      nomeDefault: "stringbox",
    },
  ];
  const dadosEstrutra = [
    {
      nome: "Ceramico",
      nomeM: "Ceramico",
      nomeFunction: dadosCeramico,
      nomeDefault: "ceramico",
    },
    {
      nome: "Metalico",
      nomeM: "Metalico",
      nomeFunction: dadosMetalico,
      nomeDefault: "metalico",
    },
    {
      nome: "Fibrocimento",
      nomeM: "Fibrocimento",
      nomeFunction: dadosFibrocimento,
      nomeDefault: "fibrocimento",
    },
    {
      nome: "Solo",
      nomeM: "Solo",
      nomeFunction: dadosSolo,
      nomeDefault: "solo",
    },
    {
      nome: "Garagem",
      nomeM: "Garagem",
      nomeFunction: dadosGaragem,
      nomeDefault: "garagem",
    },
    {
      nome: "Laje",
      nomeM: "Laje",
      nomeFunction: dadosLaje,
      nomeDefault: "laje",
    },
  ];
  const Componentes = [
    { value: 0, label: "Principais" },
    { value: 1, label: "Extras" },
    { value: 2, label: "Estruturas" },
  ];

  return (
    <>
      {loaded ? (
        <form onSubmit={handleSubmit(onSubmitKit)} {...rest}>
          <Navbar
            items={Componentes}
            align={"center"}
            setShowContent={setShowContent}
          />
          <div className="border-solid border-[1px] border-stroke rounded-md border-t-0 p-5 -mt-5">
            <InputGroup align="center" className="p-2">
              <Input
                label="Valor Total"
                name="preco_kit"
                formulario={form}
                width="xl:w-1/5"
                mascara="numero"
                prefix={"R$"}
                defaultValue={`${precos["ValorTotal"].valorTotal >= 0
                    ? precos["ValorTotal"].valorTotal.toLocaleString("pt-BR", {
                      minimumFractionDigits: 2,
                      maximumFractionDigits: 2,
                    })
                    : "0,00"
                  }`}
                disabled
              />
              <Input
                name="potencia_kit"
                formulario={form}
                width="xl:w-1/5"
                label="Potencia Kit(kWp)"
                defaultValue={defaultValues && defaultValues["potencia_kit"]}
                disabled
              />
              <InputSelectComponent
                name="loja_kit"
                formulario={form}
                label="Loja"
                width="xl:w-1/5"
                options={lojasOptions.map((e: any) => {
                  return {
                    value: e.id_loja,
                    label: e.nome_loja,
                  };
                })}
                error="Selecione a Loja"
                required
                defaultValue={
                  (defaultValues && defaultValues["loja_kit"]) ||
                  session.loja_padrao_usuario
                }
              />
            </InputGroup>

            {showContent == 0 && (
              <>
                <InputGroup align="center">
                  <Input
                    name="descricao_kit"
                    formulario={form}
                    width="xl:w-1/4"
                    label="Descrição"
                    error="Preencha a Descrição!"
                    required
                    defaultValue={
                      defaultValues && defaultValues["descricao_kit"]
                    }
                    disabled={disabledFields?.some(
                      (field: string) => field == "descricao_kit"
                    )}
                  />
                  <InputSelectComponent
                    label="Módulo"
                    skipEffect
                    width="xl:w-1/4"
                    options={dadosModulos.map((e: any) => {
                      return {
                        value: e.id_item,
                        label: e.descricao_item,
                        preco: e.precoUnitario_item,
                        potencia: e.potencia_item,
                      };
                    })}
                    name="codModulo_kit"
                    formulario={form}
                    error="Selecione o Módulo"
                    required
                    onChange={(e: any) => {
                      setPotenciaKit(e.potencia);
                      handleChange("modulos", e.preco, "preco");
                    }}
                    defaultValue={
                      newDefaultValues &&
                      newDefaultValues.find(
                        (e: any) => e.sigla_tipo_item == "modulos"
                      )?.id_item
                    }
                  />

                  <Input
                    name="qtdModulo_kit"
                    formulario={form}
                    width="xl:w-1/6"
                    type="number"
                    label="Quantidade"
                    error="Preencha a quantidade de Módulos!"
                    mascara="numerico"
                    required
                    onInput={(e: any) => {
                      handleChange("modulos", +e.target.value, "qtd");
                      setQtdModulo(+e.target.value);
                    }}
                    defaultValue={
                      newDefaultValues &&
                      newDefaultValues.find(
                        (e: any) => e.sigla_tipo_item == "modulos"
                      )?.qtd_item
                    }
                    disabled={disabledFields?.some(
                      (field: string) => field == "qtdModulo_kit"
                    )}
                  />
                </InputGroup>
                {dadosGerais.map((res: any, index) => (
                  <InputGroup key={index}>
                    <InputSelectComponent
                      label={`${res.nome} 1`}
                      width="xl:w-1/3"
                      skipEffect
                      options={res["nomeFunction"].map((e: any) => ({
                        value: e[`id_item`],
                        label: e[`descricao_item`],
                        preco: e[`precoUnitario_item`],
                      }))}
                      name={`cod${res.nome}1_kit`}
                      formulario={form}
                      error={`Selecione o ${res.nomeM}`}
                      required
                      onChange={(e: any) =>
                        handleChange(
                          pluralizePtBr(res.nomeM, 2),
                          e.preco,
                          "preco"
                        )
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.sigla_tipo_item == pluralizePtBr(res.nomeM, 2)
                        )[0]?.id_item
                      }
                    />
                    <Input
                      name={`qtd${res.nome}1_kit`}
                      formulario={form}
                      width="xl:w-1/6"
                      type="number"
                      label="Quantidade 1"
                      error="Preencha a quantidade de inversores!"
                      mascara="numerico"
                      required
                      onInput={(e: any) =>
                        handleChange(
                          pluralizePtBr(res.nomeM, 2),
                          +e.target.value,
                          "qtd"
                        )
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.sigla_tipo_item == pluralizePtBr(res.nomeM, 2)
                        )[0]?.qtd_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) => field == `qtd${res.nome}1_kit`
                      )}
                    />
                    <InputSelectComponent
                      label={`${res.nome} 2`}
                      width="xl:w-1/3"
                      skipEffect
                      options={res["nomeFunction"].map((e: any) => ({
                        value: e[`id_item`],
                        label: e[`descricao_item`],
                        preco: e[`precoUnitario_item`],
                      }))}
                      name={`cod${res.nome}2_kit`}
                      formulario={form}
                      onChange={(e: any) =>
                        handleChange(
                          pluralizePtBr(res.nomeM, 2) + "2",
                          e.preco,
                          "preco"
                        )
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.sigla_tipo_item == pluralizePtBr(res.nomeM, 2)
                        )[1]?.id_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) => field == `cod${res.nome}2_kit`
                      )}
                    />
                    <Input
                      name={`qtd${res.nome}2_kit`}
                      formulario={form}
                      type="number"
                      width="xl:w-1/6"
                      label="Quantidade 2"
                      mascara="numerico"
                      onInput={(e: any) =>
                        handleChange(
                          pluralizePtBr(res.nomeM, 2) + "2",
                          +e.target.value,
                          "qtd"
                        )
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.sigla_tipo_item == pluralizePtBr(res.nomeM, 2)
                        )[1]?.qtd_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) => field == `qtd${res.nome}_kit`
                      )}
                    />
                  </InputGroup>
                ))}
              </>
            )}
            {showContent == 1 && (
              <>
                <InputGroup className="flex flex-row flex-wrap" align="center">
                  {dadosExtras.map((res: any, index) => (
                    <div
                      key={index}
                      className="flex flex-row flex-nowrap gap-5"
                    >
                      <InputSelectComponent
                        skipEffect
                        label={`${res.nome}`}
                        width="xl:w-1/1"
                        options={res["nomeFunction"].map((e: any) => ({
                          value: e[`id_item`],
                          label: e[`descricao_item`],
                          preco: e[`precoUnitario_item`],
                        }))}
                        name={`cod${res.nome}_kit`}
                        formulario={form}
                        onChange={(e: any) =>
                          handleChange(res.nomeDefault, e.preco, "preco")
                        }
                        defaultValue={
                          newDefaultValues &&
                          newDefaultValues.filter(
                            (e: any) => e.sigla_tipo_item == res.nomeDefault
                          )[0]?.id_item
                        }
                        disabled={disabledFields?.some(
                          (field: string) => field == `cod${res.nome}_kit`
                        )}
                      />
                      <Input
                        name={`qtd${res.nome}_kit`}
                        type="number"
                        formulario={form}
                        width="xl:w-1/1"
                        label="Quantidade"
                        mascara="numerico"
                        onInput={(e: any) =>
                          handleChange(res.nomeDefault, +e.target.value, "qtd")
                        }
                        defaultValue={
                          newDefaultValues &&
                          newDefaultValues.filter(
                            (e: any) => e.sigla_tipo_item == res.nomeDefault
                          )[0]?.qtd_item
                        }
                        disabled={disabledFields?.some(
                          (field: string) => field == `qtd${res.nome}_kit`
                        )}
                      />
                    </div>
                  ))}
                </InputGroup>
                <InputGroup align="center" className="flex flex-row flex-wrap">
                  {dadosExtras2.map((res: any, index) => (
                    <Fragment key={index}>
                      <div className="flex flex-row flex-nowrap gap-5">
                        <InputSelectComponent
                          skipEffect
                          label={`${res.nome} 1`}
                          width="xl:w-1/1"
                          options={res["nomeFunction"].map((e: any) => ({
                            value: e[`id_item`],
                            label: e[`descricao_item`],
                            preco: e[`precoUnitario_item`],
                          }))}
                          name={`cod${res.nome}1_kit`}
                          formulario={form}
                          onChange={(e: any) =>
                            handleChange(res.nomeDefault, e.preco, "preco")
                          }
                          defaultValue={
                            newDefaultValues &&
                            newDefaultValues.filter(
                              (e: any) => e.sigla_tipo_item == res.nomeDefault
                            )[0]?.id_item
                          }
                          disabled={disabledFields?.some(
                            (field: string) => field == `cod${res.nome}1_kit`
                          )}
                        />
                        <Input
                          name={`qtd${res.nome}1_kit`}
                          formulario={form}
                          width="xl:w-1/1"
                          label="Quantidade 1"
                          type="number"
                          mascara="numerico"
                          onInput={(e: any) =>
                            handleChange(
                              res.nomeDefault,
                              +e.target.value,
                              "qtd"
                            )
                          }
                          defaultValue={
                            newDefaultValues &&
                            newDefaultValues.filter(
                              (e: any) => e.sigla_tipo_item == res.nomeDefault
                            )[0]?.qtd_item
                          }
                          disabled={disabledFields?.some(
                            (field: string) => field == `qtd${res.nome}1_kit`
                          )}
                        />
                        <InputSelectComponent
                          label={`${res.nome} 2`}
                          skipEffect
                          width="xl:w-1/1"
                          options={res["nomeFunction"].map((e: any) => ({
                            value: e[`id_item`],
                            label: e[`descricao_item`],
                            preco: e[`precoUnitario_item`],
                          }))}
                          name={`cod${res.nome}2_kit`}
                          formulario={form}
                          onChange={(e: any) =>
                            handleChange(
                              res.nomeDefault + "2",
                              e.preco,
                              "preco"
                            )
                          }
                          defaultValue={
                            newDefaultValues &&
                            newDefaultValues.filter(
                              (e: any) => e.sigla_tipo_item == res.nomeDefault
                            )[1]?.id_item
                          }
                          disabled={disabledFields?.some(
                            (field: string) => field == `cod${res.nome}2_kit`
                          )}
                        />
                        <Input
                          name={`qtd${res.nome}2_kit`}
                          formulario={form}
                          width="xl:w-1/1"
                          label="Quantidade 2"
                          mascara="numerico"
                          type="number"
                          onInput={(e: any) =>
                            handleChange(
                              res.nomeDefault + "2",
                              +e.target.value,
                              "qtd"
                            )
                          }
                          defaultValue={
                            newDefaultValues &&
                            newDefaultValues.filter(
                              (e: any) => e.sigla_tipo_item == res.nomeDefault
                            )[1]?.qtd_item
                          }
                          disabled={disabledFields?.some(
                            (field: string) => field == `qtd${res.nome}2_kit`
                          )}
                        />
                      </div>
                    </Fragment>
                  ))}
                </InputGroup>
              </>
            )}
            {showContent == 2 && (
              <>
                {dadosEstrutra.map((res: any, index) => (
                  <InputGroup key={index}>
                    <InputSelectComponent
                      skipEffect
                      label={`${res.nome} 1`}
                      width="xl:w-1/3"
                      options={res["nomeFunction"].map((e: any) => ({
                        value: e[`id_item`],
                        label: e[`descricao_item`],
                        preco: e[`precoUnitario_item`],
                      }))}
                      name={`codEstrutura${res.nome}1_kit`}
                      formulario={form}
                      onChange={(e: any) =>
                        handleChange(res.nomeDefault, e.preco, "preco")
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.tipoTelhado_componente_kit == res.nomeDefault
                        )[0]?.id_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) =>
                          field == `codEstrutura${res.nome}1_kit`
                      )}
                    />
                    <Input
                      name={`qtdEstrutura${res.nomeM}1_kit`}
                      formulario={form}
                      width="xl:w-1/6"
                      type="number"
                      label="Quantidade 1"
                      mascara="numerico"
                      onInput={(e: any) =>
                        handleChange(res.nomeDefault, +e.target.value, "qtd")
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.tipoTelhado_componente_kit == res.nomeDefault
                        )[0]?.qtd_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) =>
                          field == `qtdEstrutura${res.nome}1_kit`
                      )}
                    />
                    <InputSelectComponent
                      skipEffect
                      label={`${res.nome} 2`}
                      width="xl:w-1/3"
                      options={res["nomeFunction"].map((e: any) => ({
                        value: e[`id_item`],
                        label: e[`descricao_item`],
                        preco: e[`precoUnitario_item`],
                      }))}
                      name={`codEstrutura${res.nome}2_kit`}
                      formulario={form}
                      onChange={(e: any) =>
                        handleChange(res.nomeDefault + "2", e.preco, "preco")
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.tipoTelhado_componente_kit == res.nomeDefault
                        )[1]?.id_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) =>
                          field == `codEstrutura${res.nome}2_kit`
                      )}
                    />
                    <Input
                      name={`qtdEstrutura${res.nomeM}2_kit`}
                      formulario={form}
                      width="xl:w-1/6"
                      type="number"
                      label="Quantidade 2"
                      mascara="numerico"
                      onInput={(e: any) =>
                        handleChange(
                          res.nomeDefault + "2",
                          +e.target.value,
                          "qtd"
                        )
                      }
                      defaultValue={
                        newDefaultValues &&
                        newDefaultValues.filter(
                          (e: any) =>
                            e.tipoTelhado_componente_kit == res.nomeDefault
                        )[1]?.qtd_item
                      }
                      disabled={disabledFields?.some(
                        (field: string) =>
                          field == `qtdEstrutura${res.nome}2_kit`
                      )}
                    />
                  </InputGroup>
                ))}
              </>
            )}
          </div>

          {children}
        </form>
      ) : (
        <div className="flex flex-col justify-center items-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};

export default FormKitManual;