import LoaderSun from "@/components/common/Loader/LoaderSun";
import { Button } from "@/components/ui/button";
import LoaderGif from "@/public/images/loaders/loader2.gif";
import { listarCfgMarkup } from "@/requests/CRUD/Markup/listarMarkup";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields } from "@/utils";
import { X } from "lucide-react";
import Image from "next/image";
import { useEffect, useState } from "react";
import Container from "../../components/Forms/Container";
import Divider from "../../components/Forms/Divider";
import Input from "../../components/Forms/Input";

interface IItensMarkup {
  id_campo_markup: number;
  tipo_campo_markup: number;
  vincular_potencia_campo_markup: number;
  nome_campo_markup: string;
  adiciona_subtrai_campo_markup: number;
  bloqueado_campo_markup: number;
  valor_campo_markup: any;
  oculta_campo_markup: any;
  status_campo_markup: any;
}
const ItensMarkup = ({
  form,
  blockNextStep,
  valorColeta,
  potenciaKit,
  qtdModulos,
  telhado,
  vedndedorNegocio,
}: any) => {
  // const [itemMarkupBd, setItemMarkupBd] = useState<IItensMarkup[]>([]);
  const [itensMarkup, setItensMarkup] = useState<IItensMarkup[]>(
    form.control._formValues.itensMarkup || []
  );
  // const { itemMarkup } = form.control._formValues;
  const [isLoading, setIsLoading] = useState(false);
  const { valuesSession } = useAuth();
  const [ultrapassouDescontoPermitido, setUltrapassouDescontoPermitido] =
    useState(false);
  const { session } = valuesSession();
  const { perfil, usuario } = useAuth();
  const [valorFinal, setValorFinal] = useState<any>();
  const [isLoaded, setIsLoaded] = useState(false);
  const { totalModulos } = form.control._formValues;

  useEffect(() => {
    blockNextStep(true);
    setIsLoading(true);
    // setPotenciaKit(kitEscolhido[0].potencia_kit_distribuidor);

    setValorFinal(valorColeta);

    listarCfgMarkup().then((res) => {
      res = res.filter((e: any) => {
        if (e.status_campo_markup != "1") {
          return false;
        }
        if (e.vincular_potencia_campo_markup == "1") {
          if (
            e.min_potencia_markup &&
            e.max_potencia_markup &&
            +potenciaKit < +e.min_potencia_markup &&
            +potenciaKit > +e.max_potencia_markup
          ) {
            return false;
          } else if (
            e.min_potencia_markup &&
            +potenciaKit < +e.min_potencia_markup
          ) {
            return false;
          } else if (
            e.max_potencia_markup &&
            +potenciaKit > +e.max_potencia_markup
          ) {
            return false;
          }
        }
        if (e.vincular_modulo_campo_markup == "1") {
          if (
            e.min_modulo_markup &&
            e.max_modulo_markup &&
            +qtdModulos < +e.min_modulo_markup &&
            +qtdModulos > +e.max_modulo_markup
          ) {
            return false;
          } else if (
            e.min_modulo_markup &&
            +qtdModulos < +e.min_modulo_markup
          ) {
            return false;
          } else if (
            e.max_modulo_markup &&
            +qtdModulos > +e.max_modulo_markup
          ) {
            return false;
          }
        }
        if (e.vincular_telhado_campo_markup == "1") {
          if (
            e.telhados_modulo_markup
              ?.split(",")
              .every((telhadoDisp: any) => telhadoDisp != telhado)
          ) {
            return false;
          }
        }
        return true;
      });
      // setItemMarkupBd(res);
      if (itensMarkup[0] == undefined) {
        setItensMarkup([
          // // Revisar para buscar o valor da comissão da tabela de politica de comissoes em cima do valor do kit
          // {
          //   id_campo_markup: "0",
          //   tipo_campo_markup: "1",
          //   adiciona_subtrai_campo_markup: "0",
          //   nome_campo_markup: "Comissão",
          //   valor_campo_markup: vedndedorNegocio.comissao_usuario || usuario.comissao_usuario,
          //   bloqueado_campo_markup: "1",
          //   status_campo_markup: "1",
          //   vincular_potencia_campo_markup: "0",
          //   oculta_campo_markup: "1",
          //   min_potencia_markup: "0.00",
          //   max_potencia_markup: "0.00",
          //   vincular_modulo_campo_markup: "0",
          //   min_modulo_markup: null,
          //   max_modulo_markup: null,
          //   vincular_telhado_campo_markup: "0",
          //   telhados_modulo_markup: null,
          // },
          ...res.map((item: any) =>
            item["vincular_modulo_campo_markup"] == "1"
              ? {
                  ...item,
                  valor_campo_markup: String(
                    +item["valor_campo_markup"] * +totalModulos
                  ),
                }
              : item
          ),
        ]);
      }
      // handleBlurMarkup(res);
      setIsLoading(false);
      setIsLoaded(true);
      // blockNextStep(false);
    });
  }, []);

  useEffect(() => {
    handleBlurMarkup(itensMarkup);
  }, [itensMarkup]);

  const handleBlurMarkup = (arr: IItensMarkup[]) => {
    const valorComponentes = parseFloat(
      // kitManual ? kitEscolhido.preco_kit : kitEscolhido.preco_kit_distribuidor
      valorColeta
    );
    
    
    let valorBruto = valorComponentes;
    let valorFinal = valorComponentes;

    const itensSomamMarkup = [] as any;
    const itensSubtraemMarkup = [] as any;
    const valoresDesconto = [] as any;
    let somaDescontos = 0;
    // if (itensMarkup && itemMarkupBd) {
    if (itensMarkup) {
      // Object.entries(itemMarkup).forEach(([chave, valor]: any) => {
      itensMarkup.map(({ valor_campo_markup: valor, ...item }: any) => {
        if (valor !== "" && valor !== undefined) {
          // const item = arr.find((e: any) => e.id_campo_markup === chave);
          // const valorFormat = parseFloat(
          //   FormatFields.desformatarNumeros(valor)
          // );
          const valorFormat = parseFloat(valor);

          if (
            item?.tipo_campo_markup == 1 &&
            item?.adiciona_subtrai_campo_markup == 1
          ) {
            valoresDesconto.push(valorFormat);
            somaDescontos += valorFormat;
          }

          const tipoValor =
            item?.tipo_campo_markup == 1 ? valorFormat / 100 : valorFormat;

          // const newValorFinal =
          //   item?.tipo_campo_markup == 1 ? tipoValor * valorComponentes : tipoValor;

          if (item?.adiciona_subtrai_campo_markup == 0) {
            // if (item.vincular_modulo_campo_markup == "1") {
            //   Array.from({ length: +totalModulos }).map(() => {
            //     itensSomamMarkup.push({ item, tipoValor });
            //   });
            // } else {
            itensSomamMarkup.push({ item, tipoValor });
            // }
          } else if (item?.adiciona_subtrai_campo_markup == 1) {
            // if (item.vincular_modulo_campo_markup == "1") {
            //   Array.from({ length: +totalModulos }).map(() => {
            //     itensSubtraemMarkup.push({ item, tipoValor });
            //   });
            // } else {
            itensSubtraemMarkup.push({ item, tipoValor });
            // }
          }
        }
      });

      // blockNextStep(somaDescontos > parseFloat(session.desconto_usuario));

      itensSomamMarkup.sort((a: any, b: any) =>
        a.item.nome_campo_markup.localeCompare(b.item.nome_campo_markup)
      );
      itensSubtraemMarkup.sort((a: any, b: any) =>
        a.item.nome_campo_markup.localeCompare(b.item.nome_campo_markup)
      );
      itensSomamMarkup.forEach(({ item, tipoValor: newValorFinal }: any) => {
        newValorFinal =
          item?.tipo_campo_markup == 1
            ? newValorFinal * valorComponentes
            : newValorFinal;
        valorFinal += newValorFinal;
        valorBruto += newValorFinal;
      });

      const maxValor = valorBruto;

      itensSubtraemMarkup
        .filter(({ item }: any) => item?.tipo_campo_markup == 0)
        .forEach(({ item, tipoValor: newValorFinal }: any) => {
          newValorFinal =
            item?.tipo_campo_markup == 1
              ? newValorFinal * valorBruto
              : newValorFinal;
          valorFinal -= newValorFinal;
          valorBruto -= newValorFinal;

          form.setValue(
            `itemMarkupDesconto[${item.nome_campo_markup}]`,
            newValorFinal
          );
        });

      itensSubtraemMarkup
        .filter(({ item }: any) => item?.tipo_campo_markup == 1)
        .forEach(({ item, tipoValor: newValorFinal }: any) => {
          newValorFinal =
            item?.tipo_campo_markup == 1
              ? newValorFinal * valorBruto
              : newValorFinal;
          valorFinal -= newValorFinal;

          form.setValue(
            `itemMarkupDesconto[${item.nome_campo_markup}]`,
            newValorFinal
          );
        });

      setUltrapassouDescontoPermitido(
        usuario.max_desconto_usuario &&
          +usuario.max_desconto_usuario < 100 - (100 * valorFinal) / maxValor
      );
      blockNextStep(
        usuario.max_desconto_usuario &&
          +usuario.max_desconto_usuario < 100 - (100 * valorFinal) / maxValor
      );
    } else {
      arr.forEach((item) => {
        if (
          item.valor_campo_markup !== "" &&
          item.valor_campo_markup !== undefined
        ) {
          const valorFormat = parseFloat(
            item.valor_campo_markup.replace(",", ".")
          );
          
          if (
            item?.tipo_campo_markup == 1 &&
            item?.adiciona_subtrai_campo_markup == 1
          ) {
            valoresDesconto.push(valorFormat);
            somaDescontos += valorFormat;
          }
          const tipoValor =
            item?.tipo_campo_markup == 1 ? valorFormat / 100 : valorFormat;

          const newValorFinal =
            item?.tipo_campo_markup == 1
              ? tipoValor * valorComponentes
              : tipoValor;
          

          if (item?.adiciona_subtrai_campo_markup == 0) {
            itensSomamMarkup.push({ item, newValorFinal });
          } else if (item?.adiciona_subtrai_campo_markup == 1) {
            itensSubtraemMarkup.push({ item, newValorFinal });
          }
        }
      });

      setUltrapassouDescontoPermitido(
        somaDescontos > parseFloat(usuario.max_desconto_usuario)
      );
      // blockNextStep(somaDescontos > parseFloat(session.desconto_usuario));

      itensSomamMarkup.sort((a: any, b: any) =>
        a.item.nome_campo_markup.localeCompare(b.item.nome_campo_markup)
      );
      itensSubtraemMarkup.sort((a: any, b: any) =>
        a.item.nome_campo_markup.localeCompare(b.item.nome_campo_markup)
      );

      itensSomamMarkup.forEach(({ item, newValorFinal }: any) => {
        valorFinal += newValorFinal;
        valorBruto += newValorFinal;
      });

      itensSubtraemMarkup.forEach(({ item, newValorFinal }: any) => {
        valorFinal -= newValorFinal;
      });
    }
    setValorFinal(valorFinal);

    // Procurar o uso para retirar
    form.setValue("itensMarkup", itensMarkup);
    form.setValue("valorBruto", valorBruto);
    form.setValue("valoFinalMarkup", valorFinal);
  };

  const handleCleanInputs = (e: any) => {
    // const inputName = `itemMarkup[${e}]`;
    // form.setValue(inputName, "");
    // handleBlurMarkup(itemMarkupBd);
  };

  return (
    <Container>
      {isLoaded ? (
        <>
          <div className="flex justify-center mb-5">
            {isLoading ? (
              <div className="flex justify-center w-full ">
                <Image width={64} height={64} src={LoaderGif} alt="Logo" />
              </div>
            ) : (
              <div className="grid">
                {ultrapassouDescontoPermitido && (
                  <div className="w-full flex justify-center mb-2 ">
                    <span className="px-9  w-fit bg-danger py-1 text-center rounded-sm border text-sm text-white  border-danger bg-opacity-95">
                      Maior que o desconto permitido!
                    </span>
                  </div>
                )}
                <div
                  className="flex flex-wrap items-center justify-center w-fit gap-1"
                  key={form.key}
                >
                  {itensMarkup
                    ?.filter((e: any) => e.status_campo_markup == 1)
                    .map((item, index) => {
                      return (
                        <div
                          key={index}
                          className={`${item.oculta_campo_markup == 0 ? "flex" : "hidden"} items-center gap-2 `}
                        >
                          <p className="mr-2 w-30 max-sm:text-sm">
                            {item.nome_campo_markup} (
                            {item.tipo_campo_markup == 1 ? "%" : "R$"})
                          </p>
                          <div className="flex items-center ">
                            {/* {item.adiciona_subtrai_campo_markup == 1 ? (
                              <ArrowDown />
                            ) : (
                              <ArrowUp />
                            )} */}
                            <Input
                              // name={`itemMarkup[${item.id_campo_markup}]`}
                              name=""
                              mascara="numero"
                              width="xl:w-1/2"
                              onChange={(e) => {
                                if (item.tipo_campo_markup == 1) {
                                  if (
                                    +FormatFields.desformatarNumeros(
                                      e.target.value
                                    ) > 100
                                  ) {
                                    e.target.value = "100,00";
                                  }
                                }
                                setItensMarkup((prev) => {
                                  const newItensMarkup = [...prev];
                                  newItensMarkup.splice(index, 1, {
                                    ...newItensMarkup[index],
                                    valor_campo_markup:
                                      FormatFields.desformatarNumeros(
                                        e.target.value
                                      ),
                                  });
                                  return newItensMarkup;
                                });
                              }}
                              defaultValue={FormatFields.formatarNumero(
                                item.valor_campo_markup
                              )}
                              // formulario={form}
                              style={{
                                color:
                                  item.adiciona_subtrai_campo_markup == 1
                                    ? "red"
                                    : "green",
                              }}
                            />

                            <div className=" ml-2 justify-center flex ">
                              <Button
                                type="button"
                                className={`bg-danger ${
                                  item.bloqueado_campo_markup == 1
                                    ? "hidden"
                                    : " flex"
                                } hover:bg-danger hover:brightness-95 h-8 w-9 p-0  justify-center items-center text-black font-medium`}
                                onClick={() => {
                                  setItensMarkup((prev) => {
                                    const newItensMarkup = [...prev];
                                    newItensMarkup.splice(index, 1, {
                                      ...newItensMarkup[index],
                                      valor_campo_markup: "",
                                    });
                                    return newItensMarkup;
                                  });
                                  form.reload();
                                }}
                              >
                                <X size={15} color="white" />
                              </Button>
                            </div>
                            <Divider />
                          </div>
                        </div>
                      );
                    })}
                </div>
              </div>
            )}
          </div>
          <Divider />
          <div className="flex justify-end gap-3">
            <p>Preço Final:</p>
            {form.setValue("valorFinalComponentes", String(valorFinal))}
            <p>
              {Number(valorFinal).toLocaleString("pt-BR", {
                style: "currency",
                currency: "BRL",
              })}
            </p>
          </div>
        </>
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}
    </Container>
  );
};

export default ItensMarkup;