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 { FormatFields, GetForm } from "@/utils";
import { Info } from "lucide-react";
import { useState } from "react";

export default function FormContaBancariaLoja({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  loja,
  lojas,
  instBancarias,
  tiposChavePix,
  tiposPessoas,
  ...rest
}: any) {
  const { handleSubmit, ...form } = GetForm();
  const [tipoChavePix_conta_loja, setTipoChavePix_conta_loja] = useState(
    (defaultValues && defaultValues?.tipoChavePix_conta_loja) || "cpf"
  );
  const [tipoContaLoja, setTipoContaLoja] = useState(
    defaultValues && defaultValues?.tipo_conta_loja
  );

  function onSubmitForm(data: any) {
    if (Array.isArray(data.loja_conta_loja)) {
      data.loja_conta_loja = data.loja_conta_loja
        .map((item: any) =>
          typeof item == "object" ? (item?.value ?? item?.id_loja) : item
        )
        .filter(Boolean)
        .join(",");
    }

    return onSubmitFunction(data);
  }
  return (
    <form
      onSubmit={handleSubmit(onSubmitForm)}
      key={form.key}
      {...rest}
      className="flex flex-row flex-wrap gap-3"
      // className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(190px,1fr))]"
    >
      <InputSelectComponent
        name="tipo_conta_loja"
        label="Tipo da Conta"
        formulario={form}
        required
        error="Informe o tipo da conta da loja"
        options={tiposPessoas}
        defaultValue={defaultValues && defaultValues["tipo_conta_loja"]}
        width="min-w-[190px] flex-none grow"
        onChange={(e: any) => {
          setTipoContaLoja(e?.value);
          if (e?.value == "F") {
            form.setValue(
              "cpf_cnjp_conta_loja",
              FormatFields.formatarCPF(
                form?.control?._formValues?.cpf_cnjp_conta_loja
              )
            );
          } else {
            form.setValue(
              "cpf_cnjp_conta_loja",
              FormatFields.formatarCNPJ(
                form?.control?._formValues?.cpf_cnjp_conta_loja
              )
            );
          }
        }}
      />
      <Input
        name="cpf_cnjp_conta_loja"
        label={tipoContaLoja == "F" ? "CPF" : "CNPJ"}
        formulario={form}
        required
        error={`Informe o ${tipoContaLoja == "F" ? "CPF" : "CNPJ"}`}
        mascara={tipoContaLoja == "F" ? "cpf" : "cnpj"}
        defaultValue={defaultValues && defaultValues["cpf_cnjp_conta_loja"]}
        width="min-w-[190px] flex-none grow"
      />
      <Input
        name="nome_responsavel_conta_loja"
        label="Nome Quem Está na Conta"
        formulario={form}
        required
        error="Informe o Nome"
        defaultValue={
          defaultValues && defaultValues["nome_responsavel_conta_loja"]
        }
        width="min-w-[190px] flex-none grow"
        onBlur={(e) => {
          if (
            e?.target?.value &&
            !form.control._formValues?.nome_recebedor_pix_conta_loja
          ) {
            form.setValue("nome_recebedor_pix_conta_loja", e?.target?.value);
          }
        }}
      />
      <InputSelectComponent
        name="cod_inst_bancaria_conta_loja"
        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`}
                onClick={(e: any) => {
                  e.stopPropagation();
                  handleSweetAlert({
                    icon: "info",
                    // title: "Cálculo Markup",
                    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, para isso verifique o "Cadastro de Instituição Financeira"`,
                  });
                }}
              >
                <Info />
              </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(loja?.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_conta_loja"]
        }
        onChange={(e: any) => {
          // const novasLojasSelecionadas = e.map((loja: any) => loja.value);
          // setLojasSelecionadas(novasLojasSelecionadas);
        }}
        width="min-w-[190px] flex-none grow"
      />
      <Input
        name="nrAgencia_conta_loja"
        label="Agência"
        formulario={form}
        required
        error="Informe o Número"
        defaultValue={defaultValues && defaultValues["nrAgencia_conta_loja"]}
        width="min-w-[190px] flex-none grow"
      />
      <Input
        name="numero_conta_loja"
        label="Número Conta"
        formulario={form}
        required
        error="Informe o Número"
        defaultValue={defaultValues && defaultValues["numero_conta_loja"]}
        width="min-w-[190px] flex-none grow"
      />
      <InputSelectComponent
        name="tipoChavePix_conta_loja"
        label="Tipo Chave Pix"
        formulario={form}
        options={tiposChavePix}
        required
        error="Informe o Tipo da chave pix"
        defaultValue={
          (defaultValues && defaultValues["tipoChavePix_conta_loja"]) || "cpf"
        }
        width="min-w-[190px] flex-none grow"
        onChange={(e: any) => {
          setTipoChavePix_conta_loja(e?.value);
        }}
      />
      <Input
        name="chavePix_conta_loja"
        label="Chave Pix"
        formulario={form}
        required
        error="Informe a chave pix"
        mascara={tipoChavePix_conta_loja}
        defaultValue={defaultValues && defaultValues["chavePix_conta_loja"]}
        width="min-w-[190px] flex-none grow"
      />
      <Input
        name="nome_recebedor_pix_conta_loja"
        label="Nome Recebedor do Pix"
        formulario={form}
        required
        error="Informe o Nome"
        defaultValue={
          defaultValues && defaultValues["nome_recebedor_pix_conta_loja"]
        }
        width="min-w-[190px] flex-none grow"
      />

      <InputSelectComponent
        name="loja_conta_loja"
        label="Lojas"
        isMulti
        formulario={form}
        options={[
          { label: "Todas", value: "*" },
          ...lojas?.map((loja: any) => ({
            value: loja.id_loja,
            label: loja.nome_loja,
          })),
        ]}
        error={"Selecione uma Loja"}
        required
        defaultValue={defaultValues && defaultValues["loja_conta_loja"]}
        onChange={(e: any) => {
          form.setValue("loja_conta_loja", e);
        }}
        width="min-w-[190px] flex-none grow"
      />

      {children}
    </form>
  );
}