"use client";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";

const FormInstituicaoBancaria = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  lojas,
  ...rest
}: {
  lojas: any[];
  tiposForma: any[];
  [x: string]: any;
}) => {
  const { handleSubmit, ...form } = GetForm();

  function onSubmitFormInstituicaoBancaria(data: any) {
    data.codLojas_inst_bancaria = Array.isArray(data.codLojas_inst_bancaria)
      ? data.codLojas_inst_bancaria?.join(",")
      : data.codLojas_inst_bancaria;
    return onSubmitFunction(data);
  }

  return (
    <>
      {true ? (
        <form
          onSubmit={handleSubmit(onSubmitFormInstituicaoBancaria)}
          key={form.key}
          {...rest}
          className="flex flex-row flex-wrap gap-3"
        >
          <Input
            name="nome_inst_bancaria"
            label="Nome"
            formulario={form}
            required
            error="Informe o Nome"
            defaultValue={defaultValues && defaultValues["nome_inst_bancaria"]}
            width="flex-1"
          />
          <Input
            name="codCompensacao_inst_bancaria"
            label="Código"
            formulario={form}
            // required
            error="Informe código do banco febraban"
            defaultValue={
              defaultValues && defaultValues["codCompensacao_inst_bancaria"]
            }
            width="flex-1"
          />
          <Input
            name="site_inst_bancaria"
            label="Site"
            formulario={form}
            // required
            error="Informe o Site"
            defaultValue={
              defaultValues
                ? typeof defaultValues["site_inst_bancaria"] === "string"
                  ? defaultValues["site_inst_bancaria"]
                  : typeof defaultValues["site_inst_bancaria"] === "object" &&
                      defaultValues["site_inst_bancaria"]
                    ? String(
                        (defaultValues["site_inst_bancaria"] as any)?.url ??
                          (defaultValues["site_inst_bancaria"] as any)?.href ??
                          (defaultValues["site_inst_bancaria"] as any)?.value ??
                          "",
                      )
                    : ""
                : ""
            }
            width="flex-1"
          />
          <InputSelectComponent
            name="codLojas_inst_bancaria"
            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["codLojas_inst_bancaria"]
            }
            onChange={(e: any) => {
              const novasLojasSelecionadas = e.map((loja: any) => loja.value);
              // setLojasSelecionadas(novasLojasSelecionadas);
            }}
            width="flex-1"
          />

          {children}
        </form>
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </>
  );
};

export default FormInstituicaoBancaria;