"use client";

import { useEffect, useState } from "react";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { FormatFields, GetForm } from "@/utils";
import katex from "katex";
import "katex/dist/katex.min.css";
import { Info } from "lucide-react";
import * as yup from "yup";

export const options_days = [
  {
    label: "Todos",
    value: "*",
  },
  ...Array.from({ length: 28 }).map((_, index) => ({
    value: String(index + 1),
    label: String(index + 1),
  })),
];

export default function FormCondicoesPagamento({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  lojas: oldLojas,
  tiposCondicoes,
  tipos_negocio,
  formas_pagamento,
  ...rest
}: {
  lojas: any[];
  tiposCondicoes: any[];
  [x: string]: any;
}) {
  const [lojas, setLojas] = useState(oldLojas);
  const [lojasSelecionadas, setLojasSelecionadas] = useState<any[]>(
    defaultValues ? defaultValues["cod_lojas_condicao"]?.split(",") || [] : []
  );
  const [tipoDeFormaSelecionada, setTipoDeFormaSelecionada] = useState(
    defaultValues && defaultValues["tipo_condicao"]
  );
  const [tiposNegociosLojas, setTiposNegociosLojas] = useState<any[]>(
    tipos_negocio?.filter((tipo: any) =>
      lojas
        ?.filter((loja) =>
          (defaultValues
            ? defaultValues["cod_lojas_condicao"]?.split(",") || []
            : []
          )?.includes(loja?.id_loja)
        )
        ?.some((loja) =>
          loja?.tipos_negocios_loja?.split(",")?.includes(tipo?.id_tipo_negocio)
        )
    ) || []
  );

  const { handleSubmit, ...form } = GetForm();
  const formWatch = form.watch();

  // const [options, setOptions] = useState(
  //   (
  //     defaultValues && defaultValues["dias_disponiveis_condicao"]?.split(",")
  //   )?.map((option: any) => ({
  //     label: option,
  //     value: option,
  //   })) || []
  // );

  useEffect(() => {
    setTiposNegociosLojas([]);
    listarLojas().then((newLojas) => {
      setLojas(newLojas);
      const dadosLojasSelecionadas = newLojas?.filter((loja: any) =>
        lojasSelecionadas?.includes(loja?.id_loja)
      );
      const newTiposNegociosLojas = tipos_negocio?.filter((tipo: any) =>
        dadosLojasSelecionadas?.some((loja: any) =>
          loja?.tipos_negocios_loja?.split(",")?.includes(tipo?.id_tipo_negocio)
        )
      );

      setTiposNegociosLojas(newTiposNegociosLojas);

      const form_cod_tipos_negocios = form.getValues("cod_tipos_negocios");
      if (form_cod_tipos_negocios) {
        if (
          form_cod_tipos_negocios?.[0]?.value == "*" &&
          newTiposNegociosLojas?.length == tipos_negocio?.length
        ) {
        } else if (form_cod_tipos_negocios?.[0]?.value == "*") {
          form.setValue(
            "cod_tipos_negocios",
            newTiposNegociosLojas?.map((tipo: any) => ({
              ...tipo,
              label: tipo?.nome_tipo_negocio,
              value: tipo?.id_tipo_negocio,
            }))
          );
        } else {
          form.setValue(
            "cod_tipos_negocios",
            form_cod_tipos_negocios?.filter((t: any) =>
              newTiposNegociosLojas?.some(
                (tipo: any) => tipo?.id_tipo_negocio == t?.value
              )
            )
          );
        }
      }
    });
  }, [lojasSelecionadas, oldLojas]);

  // useEffect(() => {
  //   // Gerar opções de 30 em 30 dias até 360 (12 meses)
  //   const bancOptions = [];
  //   for (let i = 30; i <= 360; i += 30) {
  //     bancOptions.push({
  //       label: `${i}`,
  //       value: i.toString(),
  //     });
  //   }

  //   // Se já existem defaultValues, manter; senão usar as opções geradas
  //   if (!defaultValues || !defaultValues["prazos_condicao"]) {
  //     setOptions(bancOptions);
  //   }
  // }, [lojasSelecionadas, lojas]);

  // useEffect(() => {
  //   if (defaultValues && defaultValues["dias_disponiveis_condicao"]) {
  //     form.setValue("dias_disponiveis_condicao", options);
  //   }
  // }, []);

  function onSubmitFormFormaPagamento(data: any) {
    data.cod_lojas_condicao = Array.isArray(data.cod_lojas_condicao)
      ? data.cod_lojas_condicao?.join(",")
      : data.cod_lojas_condicao;
    data.cod_tipos_negocios = Array.isArray(data.cod_tipos_negocios)
      ? data.cod_tipos_negocios?.join(",")
      : data.cod_tipos_negocios;
    data.cod_formas_pagamento_condicao = Array.isArray(
      data.cod_formas_pagamento_condicao
    )
      ? data.cod_formas_pagamento_condicao?.join(",")
      : data.cod_formas_pagamento_condicao;
    // data.prazos_condicao = Array.isArray(data.prazos_condicao)
    //   ? data.prazos_condicao?.join(",")
    //   : data.prazos_condicao;
    data.dias_disponiveis_condicao = Array.isArray(
      data.dias_disponiveis_condicao
    )
      ? data.dias_disponiveis_condicao?.join(",")
      : data.dias_disponiveis_condicao;
    // if (data.tipo_condicao == "0") {
    //   data.prazos_condicao = "0";
    //   data.taxa_juros_condicao = "0";
    // }
    return onSubmitFunction(data);
  }

  return (
    <>
      {true ? (
        <form
          onSubmit={handleSubmit(onSubmitFormFormaPagamento)}
          key={form.key}
          {...rest}
          className="flex flex-row flex-wrap gap-3"
        >
          <Input
            name="nome_condicao"
            label="Nome"
            formulario={form}
            required
            error="Informe o Nome"
            defaultValue={defaultValues && defaultValues["nome_condicao"]}
            width="flex-1"
          />
          <InputSelectComponent
            name="cod_lojas_condicao"
            label="Lojas"
            isMulti
            formulario={form}
            options={lojas?.map((loja: any) => ({
              value: loja.id_loja,
              label: loja.nome_loja,
            }))}
            // error={"Selecione uma Loja"}
            // required
            defaultValue={defaultValues && defaultValues["cod_lojas_condicao"]}
            onChange={(e: any) => {
              const novasLojasSelecionadas = e.map((loja: any) => loja.value);
              setLojasSelecionadas(novasLojasSelecionadas);
            }}
            skipEffect
            width="flex-1"
          />
          <InputSelectComponent
            name="cod_tipos_negocios"
            label="Tipos de negócio"
            isMulti
            formulario={form}
            options={[
              ...(tiposNegociosLojas?.length == tipos_negocio?.length
                ? [
                    {
                      label: "Todos",
                      value: "*",
                    },
                  ]
                : []),
              ...tiposNegociosLojas?.map((tipo: any) => ({
                ...tipo,
                label: tipo?.nome_tipo_negocio,
                value: tipo?.id_tipo_negocio,
              })),
            ]}
            required
            error="Informe o Tipo de Negócio"
            defaultValue={defaultValues && defaultValues["cod_tipos_negocios"]}
            skipEffect
            width="flex-1"
          />
          <InputSelectComponent
            name="cod_formas_pagamento_condicao"
            label="Formas de pagamento"
            isMulti
            formulario={form}
            options={[
              {
                label: "Todas",
                value: "*",
              },
              ...formas_pagamento?.map((forma: any) => ({
                ...forma,
                label: forma?.nome_forma,
                value: forma?.id_forma,
              })),
            ]}
            required
            error="Informe para quais Formas Essa condição está liberada"
            defaultValue={
              defaultValues && defaultValues["cod_formas_pagamento_condicao"]
            }
            skipEffect
            width="flex-1"
          />
          {/* <InputSelectComponent
            name="cod_tipos_negocio_condicao"
            label="Lojas"
            isMulti
            formulario={form}
            options={lojas?.map((loja: any) => ({
              value: loja.id_loja,
              label: loja.nome_loja,
            }))}
            error={"Selecione uma Loja"}
            required
            defaultValue={defaultValues && defaultValues["cod_tipos_negocio_condicao"]}
            onChange={(e: any) => {
              // const novasLojasSelecionadas = e.map((loja: any) => loja.value);
              // setLojasSelecionadas(novasLojasSelecionadas);
            }}
            skipEffect
            width="flex-1"
          /> */}
          <InputSelectComponent
            name="tipo_condicao"
            label="Forma que entra na Conta"
            formulario={form}
            options={tiposCondicoes}
            // formatOptionLabel={(tipo) => (
            //   <div className="flex flex-row gap-2">
            //     {tipo.label}
            //     {tipo.value == "2" && (
            //       <Button
            //         type="button"
            //         className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
            //         onClick={(e: any) => {
            //           e.stopPropagation();
            //           handleSweetAlert({
            //             icon: "info",
            //             // title: "Cálculo Markup",
            //             showDenyButton: false,
            //             confirmButtonText: "Ok",
            //             html: (
            //               <div className="flex flex-col gap-2">
            //                 Atenção!! Com esta opção, é possível criar condições
            //                 de pagamento com a quantidade dias para o VENCIMENTO
            //                 que desejar, sendo que o vencimento poderá cair em
            //                 dias diferentes do mês.
            //               </div>
            //             ),
            //           });
            //         }}
            //       >
            //         <Info />
            //       </Button>
            //     )}
            //   </div>
            // )}
            error={"Selecione um Tipo"}
            required
            defaultValue={defaultValues && defaultValues["tipo_condicao"]}
            // onChange={(e: any) => {
            //   setTipoDeFormaSelecionada(e?.value);
            //   if (e?.value == "0") {
            //     form.control.unregister(
            //       [
            //         "qtdParcelas_condicao",
            //         "prazos_condicao",
            //         "taxa_juros_condicao",
            //       ] as never[],
            //       {
            //         keepError: false,
            //         keepValue: false,
            //       }
            //     );
            //     form.reload();
            //   }
            // }}
            skipEffect
            width="flex-1"
          />
          {/* {["1", "2", "3"].includes(tipoDeFormaSelecionada) && ( */}
          <Input
            name="qtdParcelas_condicao"
            label="Qtd Parcelas Máxima"
            formulario={form}
            mascara="numerico"
            required
            error="Informe a Quantidade"
            defaultValue={
              defaultValues && defaultValues["qtdParcelas_condicao"]
            }
            width="flex-1"
          />
          {/* )} */}
          {/* {tipoDeFormaSelecionada == "1" && (
            <>
              <InputSelectComponent
                name="periodicidade_condicao"
                label="Periodicidade"
                formulario={form}
                options={[
                  {
                    value: "DAY",
                    label: "Diário",
                  },
                  {
                    value: "WEEK",
                    label: "Semanal",
                  },
                  {
                    value: "MONTH",
                    label: "Mensal",
                  },
                  {
                    value: "YEAR",
                    label: "Anual",
                  },
                ]}
                required
                error="Informe a Periodicidade"
                defaultValue={
                  defaultValues && defaultValues["periodicidade_condicao"]
                }
                width="flex-1"
                // dynamic
              />
            </>
          )} */}
          {/* {((formWatch?.periodicidade_condicao?.value == "MONTH" &&
            tipoDeFormaSelecionada == "1") ||
            tipoDeFormaSelecionada == "2") && ( */}
          <InputSelectComponent
            name="dias_disponiveis_condicao"
            label={
              <span className="w-fit flex flex-row gap-1">
                <div>Dias Vencimento Liberados</div>
                {/* {formWatch?.periodicidade_condicao?.value == "MONTH" && (
                  <div className="px-1">
                    <Button
                      type="button"
                      className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                      onClick={(e: any) => {
                        e.stopPropagation();
                        handleSweetAlert({
                          icon: "info",
                          title: "Dia de Vencimento",
                          showDenyButton: false,
                          confirmButtonText: "Ok",
                          html: `Atenção!! Com esta opção o dia de vencimento será sempre no dia cadastrado para o vencimento, ou seja, sempre será o mesmo dia de cada mês.`,
                        });
                      }}
                    >
                      <Info />
                    </Button>
                  </div>
                )} */}
              </span>
            }
            formulario={form}
            error={"Informe um dia disponível"}
            required
            defaultValue={
              defaultValues && defaultValues["dias_disponiveis_condicao"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "dias_disponiveis_condicao"
            )}
            isMulti
            options={options_days}
            // creatable
            skipEffect
            validateCreateOption={(
              inputValue: string,
              inputOptions?: any[]
            ) => {
              if (inputOptions?.some((option) => option.value == inputValue)) {
              }
              if (/^\d+$/.test(inputValue)) {
                if (inputValue == "0") {
                  form.setError(
                    "dias_disponiveis_condicao" as `root.${string}`,
                    {
                      type: "manual",
                      message: "Números a cima de 0",
                    }
                  );
                  return false;
                }
                if (
                  inputValue &&
                  +inputValue == +inputValue &&
                  +inputValue > 28
                ) {
                  form.setError(
                    "dias_disponiveis_condicao" as `root.${string}`,
                    {
                      type: "manual",
                      message: "Números menores que 29",
                    }
                  );
                  return false;
                }
                form.clearErrors("dias_disponiveis_condicao");
                return {
                  label: inputValue,
                  value: inputValue,
                };
              }
              form.setError("dias_disponiveis_condicao" as `root.${string}`, {
                type: "manual",
                message: "Apenas números",
              });
              return false;
            }}
            onChange={(e: any) => {
              const valoresOrdenados = e?.sort(
                (a: any, b: any) => a.value - b.value
              );
              form.setValue("dias_disponiveis_condicao", valoresOrdenados);
            }}
            width="flex-1"
            dynamic
          />
          {/* )} */}
          <Input
            name="taxa_juros_condicao"
            label={
              <div className="w-fit flex flex-row gap-1">
                <div>{"Taxa de Juros (mensal)"}</div>
                <div className="px-1">
                  <Button
                    type="button"
                    className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                    onClick={(e: any) => {
                      e.stopPropagation();
                      handleSweetAlert({
                        icon: "info",
                        title: "Cálculo dos Juros usando a Fórmula PRICE",
                        showDenyButton: false,
                        confirmButtonText: "Ok",
                        html: (
                          <div className="flex flex-col gap-2">
                            <div>
                              <div className="font-semibold">
                                Fórmula que obtêm qual o valor da parcela.
                              </div>
                              <div
                                className="italic font-bold flex flex-col gap-2 items-center py-2 text-xl"
                                dangerouslySetInnerHTML={{
                                  __html: katex.renderToString(
                                    "P = PV \\cdot \\frac{i}{1 - (1+i)^{-n}}",
                                    {
                                      throwOnError: false,
                                    }
                                  ),
                                }}
                              ></div>
                              <div className="italic flex flex-col items-start pb-2">
                                <div>P = Valor da Parcela</div>
                                <div>
                                  PV = Total da dívida (Valor Principal)
                                </div>
                                <div>i = Taxa de juros no período (meses)</div>
                                <div>n = Número de parcelas</div>
                              </div>
                              <fieldset className="flex flex-col border-black/25 border rounded p-2 px-3 w-full">
                                <div>Links Úteis</div>
                                <a
                                  href="https://www3.bcb.gov.br/CALCIDADAO/publico/exibirFormFinanciamentoPrestacoesFixas.do?method=exibirFormFinanciamentoPrestacoesFixas"
                                  target="_blank"
                                  style={{
                                    color: "revert",
                                    textDecoration: "revert",
                                  }}
                                >
                                  Calculadora do Banco Central do Brasil
                                </a>
                                <a
                                  href="https://www.calcule.net/financeiro/juros-financiamento-calculadora/"
                                  target="_blank"
                                  style={{
                                    color: "revert",
                                    textDecoration: "revert",
                                  }}
                                >
                                  Calculadora de Juros
                                </a>
                                <a
                                  href="https://investnews.com.br/ferramentas/calculadoras/calculadora-price/"
                                  target="_blank"
                                  style={{
                                    color: "revert",
                                    textDecoration: "revert",
                                  }}
                                >
                                  Calculadora da Tabela Price
                                </a>
                              </fieldset>
                            </div>
                          </div>
                        ),
                      });
                    }}
                  >
                    <Info />
                  </Button>
                </div>
              </div>
            }
            formulario={form}
            suffix={"%"}
            mascara="numero"
            maxLength={6}
            // prefix={"%"}
            schema={yup
              .number()
              .required("Informe a taxa de juros")
              .transform((val) => +FormatFields.desformatarNumeros(val || 0))
              .max(100, "Porcentagem Máxima: 100")}
            required
            onChange={(e) => {
              if (
                e?.target?.value &&
                +FormatFields.desformatarNumeros(e?.target?.value || 0) > 100
              ) {
                form?.setValue("taxa_juros_condicao", "100,00");
              }
            }}
            width="flex-1"
            defaultValue={defaultValues && defaultValues["taxa_juros_condicao"]}
            // error={"Informe um Prazo"}
          />
          {children}
        </form>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
}