import { Button } from "@material-tailwind/react";
import { AiOutlinePlus } from "react-icons/ai";
import { GrFormClose } from "react-icons/gr";
import Container from "../../components/Forms/Container";
import InputGroup from "../../components/Forms/InputGroup";
import InputSelectComponent from "../../components/Forms/InputSelect";

import { listarEstruturas } from "@/requests/CRUD/EstruturaFixacao/listarEstruturaFixacao";
import { IValueLabel } from "@/types/formInterfaces";
import { Alert, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import Input from "../../components/Forms/Input";

const TiposTelhado = ({ form, selectedTelhado }: any) => {
  const [estruturas, setEstruturas] = useState(["Estrutura 1"]);
  const [optionsEstruturas, setOptionEstruturas] = useState<IValueLabel[]>([]);
  const [estruturaAtual, setEstruturaAtual] = useState(0);
  const [moduloExcedido, setModuloExcedido] = useState(false);
  const [estruturaSelecionada, setEstruturaSelecionada] = useState<any>();
  const [modulosPorLinha, setModulosPorLinha] = useState(
    Array(estruturas.length).fill(""),
  );

  const { modulosSelecionados, siglaTelhadoEscolhido } =
    form.control._formValues;
  const [modulosAlert, setModulosAlert] = useState(false);
  const setValue = form.setValue;
  const [camposEstruturas, setCamposEstruturas] = useState([
    { suporte: "", numeroLinhas: "", modulosPorLinha: "" },
  ]);
  const [numeroEstruturas, setNumeroEstruturas] = useState(1);
  useEffect(() => {
    getEstruturasForm();
  }, []);
  const getEstruturasForm = () => {
    const estruturasForm = form.control._formValues.estruturasForm;
    const estruturasForm2 = estruturasForm.map((estrutura: any) => ({
      suporte: estrutura.suporte,
      numeroLinhas: estrutura.numeroLinhas,
      modulosPorLinha: estrutura.modulosPorLinha,
    }));

    setEstruturas(
      estruturasForm.map((_: any, index: number) => `Estrutura ${index + 1}`),
    );

    // setEstruturas([
    //   ...estruturas,
    //   estruturas.map((_: any, index: number) => `Estrutura ${index + 1}`),
    // ]);

    // setEstruturas(
    //   estruturas.map((estrutura: any) => ({
    //     suporte: estrutura.suporte,
    //     numeroLinhas: estrutura.numeroLinhas,
    //     modulosPorLinha: estrutura.modulosPorLinha,
    //   }))
    // );
  };

  // useEffect(()=>{
  //   if(estruturaSelecionada) {
  //     validaQuantidadeModulos(modulosPorLinha);
  //   }
  // }, [estruturaSelecionada])

  useEffect(() => {
    selectedTelhado(true);
    listarEstruturas().then((arr) => {
      setOptionEstruturas(
        arr
          .filter(
            (e: any) => e.sigla_categoria_telhado == siglaTelhadoEscolhido,
          )
          .map((estrutura: any) => ({
            label: `${estrutura.nome_estrutura}`,
            value: `${estrutura.id_estrutura}`,
          })),
      );
    });

    valueModulos();
  }, []);

  const valueModulos = () => {
    const totalEstruturas = form.control._formValues.estruturasForm.length;
    let soma = 0;
    const modulosPorLinhas: number[] = [];

    for (let i = 0; i < totalEstruturas; i++) {
      const { estruturasForm } = form.control._formValues;
      const numeroLinhas = estruturasForm[i].numeroLinhas;
      const modulosLinha = estruturasForm[i].modulosPorLinha;
      modulosPorLinhas.push(Number(modulosLinha) * numeroLinhas);
      soma += Number(modulosLinha) * numeroLinhas;
    }
    if (soma >= modulosSelecionados) {
      setModuloExcedido(true);
    }
    validaQuantidadeModulos(modulosPorLinhas);
  };

  const ValidaModulos = (valorAtual: string, indexEstrutura: number) => {
    const novoEstado = [...modulosPorLinha];
    const { estruturasForm } = form.control._formValues;
    const valor = estruturasForm[indexEstrutura].numeroLinhas;
    novoEstado[indexEstrutura] = Number(valorAtual) * valor;

    setModulosPorLinha(novoEstado);
    validaQuantidadeModulos(novoEstado);
  };

  const ValidaLinhaModulos = (valorAtual: string, indexEstrutura: number) => {
    const novoEstado = [...modulosPorLinha];
    const { estruturasForm } = form.control._formValues;
    const valor = estruturasForm[indexEstrutura].modulosPorLinha;

    novoEstado[indexEstrutura] = Number(valorAtual) * Number(valor);

    setModulosPorLinha(novoEstado);
    validaQuantidadeModulos(novoEstado);
  };

  const validaQuantidadeModulos = (novoEstado: any[]) => {
    if (
      !form.control._formValues.estruturasForm?.every((e: any) => e.suporte)
    ) {
      return selectedTelhado(true);
    }
    const soma = novoEstado.reduce(
      (acumulador, valorAtual) => acumulador + valorAtual,
      0,
    );

    if (soma == modulosSelecionados) {
      selectedTelhado(false);
    } else {
      selectedTelhado(true);
    }
    if (soma >= modulosSelecionados) {
      setModuloExcedido(true);
      if (soma > modulosSelecionados) {
        // setValue(`estruturasForm[${indexEstrutura}].modulosPorLinha`, "");
        const novoEstado = [...modulosPorLinha];
        // novoEstado[indexEstrutura] = "";
        setModulosPorLinha(novoEstado);
        setModulosAlert(true);
        const timeout = setTimeout(() => {
          setModulosAlert(false);
        }, 4000);
        return () => {
          clearTimeout(timeout);
        };
      }
    } else {
      setModulosAlert(false);
      setModuloExcedido(false);
    }
  };

  const handleAddEstrutura = () => {
    if (!moduloExcedido) {
      const novaEstrutura = `Estrutura ${numeroEstruturas + 1}`;
      setEstruturas([...estruturas, novaEstrutura]);
      setCamposEstruturas([
        ...camposEstruturas,
        { suporte: "", numeroLinhas: "", modulosPorLinha: "" },
      ]);
      setNumeroEstruturas(numeroEstruturas + 1);
      setEstruturaAtual(estruturas.length);
    }
  };
  const handleRemoveEstrutua = (index: number) => {
    const novosCamposEstruturas = [...camposEstruturas];
    novosCamposEstruturas.splice(index, 1);

    form.control._formValues.estruturasForm.splice(index, 1);
    setModulosPorLinha((prev: any) => {
      const newArr = [...prev];
      newArr.splice(index, 1);
      return newArr;
    });
    const novasEstruturas = [...estruturas];
    novasEstruturas.splice(index, 1);

    setEstruturas(novasEstruturas);
    setCamposEstruturas(novosCamposEstruturas);

    setNumeroEstruturas(numeroEstruturas - 1);
    if (index === estruturaAtual && estruturas.length > 0) {
      setEstruturaAtual(index - 1);
    }
    const novoEstado = [...modulosPorLinha];
    valueModulos();
  };

  return (
    <>
      <div className="grid gap-2 mt-3">
        <div className="flex items-center justify-between">
          <p className="text-lg">
            Tipos de <span className="font-bold">Estrutura</span>
          </p>
          <InputGroup align="end">
            <Tooltip
              title={`${
                moduloExcedido
                  ? "O limite de módulos atingido"
                  : "Adiciona mais estruturas"
              }`}
            >
              <Button
                onClick={handleAddEstrutura}
                disabled={moduloExcedido}
                className="bg-success flex items-center gap-1 "
              >
                <AiOutlinePlus />
                Adicionar Estrutura
              </Button>
            </Tooltip>
          </InputGroup>
        </div>
        <Container className="w-full">
          <div className="max-sm:flex-col-reverse  flex justify-between">
            <div className="grid-cols-2 grid md:flex gap-3 mb-9">
              {estruturas &&
                estruturas.map((estrutura, index) => {
                  return (
                    <div className="w-fit" key={index}>
                      <div className="relative">
                        <button
                          type="button"
                          onClick={() => setEstruturaAtual(index)}
                          className={` ${estruturaAtual == index ? "bg-primary" : "bg-black"} text-white p-1 px-4 rounded-lg`}
                        >
                          {estrutura}
                        </button>
                        {index != 0 && (
                          <button
                            type="button"
                            onClick={() => handleRemoveEstrutua(index)}
                            className="absolute -top-1 -right-1 bg-danger text-xs text-white w-4 h-4 rounded-full flex items-center justify-center"
                          >
                            <GrFormClose />
                          </button>
                        )}
                      </div>
                    </div>
                  );
                })}
            </div>
            <div className="grid  justify-end mb-2">
              <span>Módulos necessários: {modulosSelecionados}</span>
            </div>
          </div>

          {estruturas &&
            estruturas.map((_, index) => {
              return (
                <div
                  key={index}
                  style={{
                    display: index === estruturaAtual ? "block" : "none", // Show only the current structure
                  }}
                >
                  {modulosAlert && (
                    <Alert variant="outlined" severity="error">
                      A quantidade de módulos não deve ultrapassar a quantidade
                      de módulos necessários.
                    </Alert>
                  )}
                  <InputGroup>
                    <InputSelectComponent
                      skipEffect
                      label="Suporte da Estrutura"
                      width=""
                      menuPlacement="top"
                      name={`estruturasForm[${index}].suporte`}
                      options={optionsEstruturas}
                      formulario={form}
                      required
                      error="Selecione um Suporte"
                      onChange={() => valueModulos()}
                    />
                    <Input
                      formulario={form}
                      name={`estruturasForm[${index}].numeroLinhas`}
                      label="Número de Linhas"
                      onKeyUp={(e) =>
                        ValidaLinhaModulos(e.currentTarget.value, index)
                      }
                      onBlur={(e) =>
                        ValidaLinhaModulos(e.currentTarget.value, index)
                      }
                      defaultValue="1"
                    />
                    <Input
                      formulario={form}
                      mascara="numerico"
                      onKeyUp={(e) =>
                        ValidaModulos(e.currentTarget.value, index)
                      }
                      onBlur={(e) =>
                        ValidaModulos(e.currentTarget.value, index)
                      }
                      defaultValue={index == 0 ? modulosSelecionados : ""}
                      name={`estruturasForm[${index}].modulosPorLinha`}
                      label="Módulos por Linha"
                    />
                  </InputGroup>
                </div>
              );
            })}
        </Container>
      </div>
    </>
  );
};

export default TiposTelhado;