"use client";

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 { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useAuth } from "@/src/contexts/authContext";
import { useLoja } from "@/src/contexts/lojaContext";
import { FormatFields, GetForm } from "@/utils";
import { Info } from "lucide-react";
import { useState } from "react";
import * as yup from "yup";

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

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const { lojaAtual } = useLoja();

  const arrayTaxas = [6, 12, 24, 36, 48, 60, 72, 84, 96, 108, 120];
  return (
    <>
      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        <div className="flex flex-col justify-center gap-2">
          <InputGroup>
            {/* <Input
              label="Código"
              name="codigo_inst"
              formulario={form}
              error={"Preencha o Código"}
              mascara="numerico"
              maxLength={3}
              required
              defaultValue={defaultValues && defaultValues["codigo_inst"]}
              disabled={disabledFields?.some(
                (field: string) => field == "codigo_inst"
              )}
            /> */}
            <Input
              label="Nome"
              name="nome_inst"
              formulario={form}
              error={"Preencha o Nome"}
              required
              defaultValue={defaultValues && defaultValues["nome_inst"]}
              disabled={disabledFields?.some(
                (field: string) => field == "nome_inst"
              )}
            />
            <InputSelectComponent
              name="cod_inst_bancaria_inst"
              label={
                <span className="w-fit flex flex-row gap-1">
                  <div>Instituição Financeira</div>
                  <div className="px-1">
                    <Button
                      type="button"
                      className={` bg-primary flex flex-row gap-2 rounded-full p-0 w-5 h-5`}
                      onClick={(e: any) => {
                        e.stopPropagation();
                        handleSweetAlert({
                          icon: "info",
                          showDenyButton: false,
                          confirmButtonText: "Ok",
                          html: `ATENÇÃO!!! Para as instituições financeiras aparecerem nesta lista, as mesmas deverão estar ATIVAS e cadastradas para a loja atual (${lojaAtual?.nome_loja || "Nenhuma loja selecionada"}). Para isso verifique o "Cadastro de Instituição Financeira"`,
                        });
                      }}
                    >
                      <Info size={12} />
                    </Button>
                  </div>
                </span>
              }
              // isMulti
              formulario={form}
              options={instBancarias
                ?.filter(
                  (banco: any) =>
                    banco.status_inst_bancaria != "0" &&
                    (banco.codLojas_inst_bancaria == "*" ||
                      banco.codLojas_inst_bancaria
                        ?.split(",")
                        ?.includes(String(lojaAtual?.id_loja)))
                )
                ?.sort(
                  (a: any, b: any) =>
                    a?.codCompensacao_inst_bancaria -
                    b?.codCompensacao_inst_bancaria
                )
                .map((banco: any) => ({
                  value: banco.id_inst_bancaria,
                  label: `${banco.codCompensacao_inst_bancaria ? `${banco.codCompensacao_inst_bancaria} - ` : ""}${banco.nome_inst_bancaria}`,
                }))}
              error={"Selecione uma Instituição Financeira"}
              required
              defaultValue={
                defaultValues && defaultValues["cod_inst_bancaria_inst"]
              }
              onChange={(e: any) => {
                // const novasLojasSelecionadas = e.map((loja: any) => loja.value);
                // setLojasSelecionadas(novasLojasSelecionadas);
              }}
              width="min-w-[190px] flex-none grow"
            />
            <Input
              label="IOF(%)"
              name="iof_inst"
              formulario={form}
              error={"Preencha o IOF"}
              required
              maxLength={5}
              defaultValue={defaultValues && defaultValues["iof_inst"]}
              disabled={disabledFields?.some(
                (field: string) => field == "iof_inst"
              )}
              mascara="numero"
            />
          </InputGroup>
          <InputGroup className="flex gap-10">
            <div className="flex gap-5 border-[1px] w-full border-primary border-opacity-25 rounded-md p-2">
              <Input
                required
                label={"Taxa de Juros (Pessoa Física)"}
                name={`jurosPF_inst`}
                formulario={form}
                error={`Preencha a taxa`}
                // required
                defaultValue={defaultValues && defaultValues[`jurosPF_inst`]}
                disabled={disabledFields?.some(
                  (field: string) => field == `jurosPF_inst`
                )}
                mascara="numero"
                onChange={(e) => {
                  if (e.target.value) {
                    if (
                      +FormatFields.desformatarNumeros(e.target.value) > 100
                    ) {
                      e.target.value = "100,00";
                    }
                  }
                }}
              />

              <InputSelectComponent
                label="Max. Parcelas"
                name="parcelasPF_inst"
                formulario={form}
                width="w-1/2"
                error={"Preencha o numero de Parcelas"}
                required
                defaultValue={defaultValues && defaultValues["parcelasPF_inst"]}
                options={[
                  { label: "6x", value: 6 },
                  { label: "12x", value: 12 },
                  { label: "24x", value: 24 },
                  { label: "36x", value: 36 },
                  { label: "48x", value: 48 },
                  { label: "60x", value: 60 },
                  { label: "72x", value: 72 },
                  { label: "84x", value: 84 },
                  { label: "96x", value: 96 },
                  { label: "108x", value: 108 },
                  { label: "120x", value: 120 },
                ]}
                skipEffect
              />
            </div>
            <div className="flex gap-5 w-full border-[1px] border-primary border-opacity-25  rounded-md p-2 ml-0">
              <Input
                label={"Taxa de juros (Pessoa Jurídica)"}
                name={`jurosPJ_inst`}
                required
                formulario={form}
                error={`Preencha a taxa`}
                // required
                defaultValue={defaultValues && defaultValues[`jurosPJ_inst`]}
                disabled={disabledFields?.some(
                  (field: string) => field == `jurosPJ_inst`
                )}
                mascara="numero"
                onChange={(e) => {
                  if (e.target.value) {
                    if (
                      +FormatFields.desformatarNumeros(e.target.value) > 100
                    ) {
                      e.target.value = "100,00";
                    }
                  }
                }}
              />
              <InputSelectComponent
                label="Max. Parcelas"
                name="parcelasPJ_inst"
                formulario={form}
                width="w-1/2"
                error={"Preencha o numero de Parcelas"}
                required
                defaultValue={defaultValues && defaultValues["parcelasPJ_inst"]}
                options={[
                  { label: "6x", value: 6 },
                  { label: "12x", value: 12 },
                  { label: "24x", value: 24 },
                  { label: "36x", value: 36 },
                  { label: "48x", value: 48 },
                  { label: "60x", value: 60 },
                  { label: "72x", value: 72 },
                  { label: "84x", value: 84 },
                  { label: "96x", value: 96 },
                  { label: "108x", value: 108 },
                  { label: "120x", value: 120 },
                ]}
                skipEffect
              />
            </div>
            {/* {arrayTaxas.map((element, index) => (
            <Input
              key={index}
              label={element + "x(%)"}
              width="xl:w-1/6"
              name={`jurosPJ${element}_inst`}
              formulario={form}
              error={`Preencha o ${element}x`}
              // required
              defaultValue={
                defaultValues && defaultValues[`jurosPJ${element}_inst`]
              }
              disabled={disabledFields?.some(
                (field: string) => field == `jurosPJ${element}_inst`
              )}
              mascara="numero"
            />
          ))} */}
          </InputGroup>
        </div>
        {children}
      </form>
    </>
  );
};

export default FormInstituicao;