import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import InputGroup from "@/components/Forms/InputGroup";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cadastrarMeioPagamento } from "@/requests/CRUD/MeiosPagamento/cadastrarMeioPagamento";
import { deleteMeioPagamento } from "@/requests/CRUD/MeiosPagamento/deletarMeioPagamento";
import { editarMeiosPagamento } from "@/requests/CRUD/MeiosPagamento/editarMeioPagamento";
import { listarMeiosPagamento } from "@/requests/CRUD/MeiosPagamento/listarMeioPagamento";
import { listarInstBancarias } from "@/requests/CRUD/InstBancarias/listarInstBancarias";
import { GetForm, validaCPFCNPJ } from "@/utils";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { useEffect, useMemo, useRef } from "react";
import { FaTrash } from "react-icons/fa";
import FormMeioRecebimento, {
  exibirErroValidacaoMeioPagamento,
  sanitizarPayloadMeioPagamento,
  validarMeioPagamento,
} from "./FormMetodoRecebimento";
const columns = [
  {
    header: "ID",
    accessorKey: "id_meio_recebimento",
  },
  {
    header: "Tipo Meio Recebimento",
    accessorKey: "tipo_meio_recebimento_label",
  },
  {
    header: "Pagar Para",
    accessorKey: "pagarPara_meio_recebimento_label",
  },
  {
    header: "Tipo Chave Pix",
    accessorKey: "tipoChavePix_meio_recebimento",
  },
  {
    header: "Chave Pix",
    accessorKey: "chavePix_meio_recebimento",
  },
  {
    header: "ID Instituição Bancária",
    accessorKey: "id_instituicao_bancaria_label",
  },
  {
    header: "Nome Instituição Bancária",
    accessorKey: "nome_instituicao_bancaria_label",
  },
  {
    header: "Código",
    accessorKey: "codCompensacao_inst_bancaria_label",
  },
  {
    header: "Nome do Titular",
    accessorKey: "nomeTitular_meio_recebimento",
  },
  {
    header: "Agência",
    accessorKey: "agencia_meio_recebimento",
  },
  {
    header: "Conta Corrente",
    accessorKey: "contaCorrente_meio_recebimento",
  },
];

const formatarMetodoRecebimento = (data: any) => {
  return data.map((item: any) => {
    const pagarPara = String(item.pagarPara_meio_recebimento ?? "");

    return {
      ...item,
      tipo_meio_recebimento_label:
        item.tipo_meio_recebimento == 0 || item.tipo_meio_recebimento == "0"
          ? "Dinheiro"
          : item.tipo_meio_recebimento == 1 ||
              item.tipo_meio_recebimento == "1"
            ? "Pix"
            : "Transferência/Depósito Bancário",
      pagarPara_meio_recebimento_label:
        pagarPara === "0" || pagarPara === "Indicador"
          ? "Indicador"
          : pagarPara === "1" || pagarPara === "Outra pessoa"
            ? "Outra pessoa"
            : "",
      id_instituicao_bancaria_label:
        item.cod_inst_bancaria_meio_recebimento ??
        item.id_inst_bancaria ??
        "",
      nome_instituicao_bancaria_label:
        item.nome_inst_bancaria ?? item.banco_meio_recebimento ?? "",
      codCompensacao_inst_bancaria_label:
        item.codCompensacao_inst_bancaria ?? "",
    };
  });
};
const FormIndicadores = ({
  children,
  defaultValues,
  onSubmitFunction,
  requireData,
  withoutPayment = false,
  withoutGeneral = false,
  formData,
  tempPaymentMethods,
  showVendedorResponsavel = false,
  usuarios = [],
  perfil,
  usuario,
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const meiosPagamentoAtuaisRef = useRef<any[]>([]);
  const instituicoesBancariasRef = useRef<any[]>([]);

  useEffect(() => {
    listarInstBancarias().then((instituicoes) => {
      instituicoesBancariasRef.current = instituicoes ?? [];
    });
  }, []);

  const listFunction = async () => {
    if (defaultValues) {
      const meiosPagamento = await listarMeiosPagamento();
      const meiosIndicador = meiosPagamento.filter(
        (meioPagamento: any) =>
          meioPagamento.codIndicador_meio_recebimento ==
          defaultValues?.id_indicador,
      );
      meiosPagamentoAtuaisRef.current = meiosIndicador;
      return meiosIndicador;
    } else {
      meiosPagamentoAtuaisRef.current = tempPaymentMethods ?? [];
      return tempPaymentMethods;
    }
  };

  const validarAntesDeSalvar = async (data: any, idMeioAtual?: string | number) => {
    const payload = sanitizarPayloadMeioPagamento(
      {
        ...data,
        codIndicador_meio_recebimento: defaultValues?.id_indicador,
      },
      instituicoesBancariasRef.current,
    );

    const erroValidacao = validarMeioPagamento(
      payload,
      meiosPagamentoAtuaisRef.current,
      idMeioAtual,
      instituicoesBancariasRef.current,
    );

    if (erroValidacao) {
      await exibirErroValidacaoMeioPagamento(erroValidacao);
      throw new Error(erroValidacao);
    }

    return payload;
  };

  useEffect(() => {
    if (formData) {
      formData(form.control._formValues);
    }
  }, [formData]);

  const criarMeioPagamento = async (data: any) => {
    const payload = await validarAntesDeSalvar(data);
    return cadastrarMeioPagamento(payload);
  };

  const editarMeioPagamentoIndicador = async (data: any) => {
    const payload = await validarAntesDeSalvar(
      data,
      data?.id_meio_recebimento,
    );
    return editarMeiosPagamento(payload);
  };

  const indicadorParaMeioPagamento = useMemo(
    () => ({
      id_indicador: defaultValues?.id_indicador,
      nome_indicador: defaultValues?.nome_indicador,
      email_indicador: defaultValues?.email_indicador,
      cpfCnpj_indicador: defaultValues?.cpfCnpj_indicador,
      telefone_indicador: defaultValues?.telefone_indicador,
    }),
    [
      defaultValues?.id_indicador,
      defaultValues?.nome_indicador,
      defaultValues?.email_indicador,
      defaultValues?.cpfCnpj_indicador,
      defaultValues?.telefone_indicador,
    ],
  );

  const FormMeioRecebimentoIndicador = useMemo(() => {
    return function FormMeioRecebimentoIndicadorWrapper(props: any) {
      return (
        <FormMeioRecebimento
          {...props}
          indicador={indicadorParaMeioPagamento}
        />
      );
    };
  }, [indicadorParaMeioPagamento]);

  return (
    <>
      <Tabs
        defaultValue={withoutGeneral ? "pagamento" : "gerais"}
        className="top-0"
      >
        <TabsList className="w-full">
          {!withoutGeneral && (
            <TabsTrigger value="gerais">Dados Gerais</TabsTrigger>
          )}
          {!withoutPayment && (
            <TabsTrigger value="pagamento">Métodos Pagamento</TabsTrigger>
          )}
        </TabsList>
        <TabsContent value="gerais">
          <form onSubmit={handleSubmit(onSubmitFunction)} className="mt-5">
            <InputGroup align="center">
              <Input
                label="Nome"
                name="nome_indicador"
                formulario={form}
                error="Digite um nome"
                width={"w-[80%]"}
                required
                mascara="letras"
                defaultValue={defaultValues && defaultValues["nome_indicador"]}
              />

              <Input
                label="CPF/CNPJ"
                name="cpfCnpj_indicador"
                formulario={form}
                width={"w-[80%]"}
                error="Digite um cpf/cnpj"
                required={!requireData}
                onChange={(e) => {
                  if (
                    e.target.value.length === 14 ||
                    e.target.value.length === 18
                  ) {
                    const validated = validaCPFCNPJ(e.target.value);
                    if (!validated) {
                      form.setError("cpfCnpj_indicador" as never, {
                        type: "manual",
                        message: "CPF/CNPJ inválido",
                      });
                      form.setValue("cpfCnpj_indicador", "");
                    } else {
                      form.setValue("cpfCnpj_indicador", e.target.value);
                      form.clearErrors("cpfCnpj_indicador");
                    }
                  }
                }}
                onBlur={(e) => {
                  if (
                    e.target.value.length === 14 ||
                    e.target.value.length === 18
                  ) {
                    const validated = validaCPFCNPJ(e.target.value);
                    if (!validated) {
                      form.setError("cpfCnpj_indicador" as never, {
                        type: "manual",
                        message: "CPF/CNPJ inválido",
                      });
                      form.setValue("cpfCnpj_indicador", "");
                    } else {
                      form.clearErrors("cpfCnpj_indicador");
                    }
                  } else {
                    if (
                      e.target.value.length > 14 ||
                      (e.target.value.length < 14 && e.target.value.length > 18)
                    ) {
                      form.setError("cpfCnpj_indicador" as never, {
                        type: "manual",
                        message: "CPF/CNPJ inválido",
                      });
                      form.setValue("cpfCnpj_indicador", "");
                    }
                  }
                }}
                mascara={"cpfCnpj"}
                defaultValue={
                  defaultValues && defaultValues["cpfCnpj_indicador"]
                }
              />

              <Input
                label="Telefone"
                name="telefone_indicador"
                formulario={form}

                width={"w-[80%]"}
                error="Digite um telefone"
                required={!requireData}

                mascara="telefone"
                defaultValue={
                  defaultValues && defaultValues["telefone_indicador"]
                }
              />

              <Input
                label="Email"
                name="email_indicador"
                formulario={form}
                width={"w-[80%]"}
                error="Digite um email"
                required={!requireData}

                type="email"
                defaultValue={defaultValues && defaultValues["email_indicador"]}
              />

              {showVendedorResponsavel && (
                <InputSelectComponent
                  label={
                    <span className="flex w-fit flex-row gap-1">
                      <span>Vendedor Responsável</span>
                      <span className="px-1">
                        <Tooltip
                          title="Atenção!! Os vendedores listados aqui são os usuários configurados como Comissionados"
                          placement="top"
                        >
                          <Info size={16} />
                        </Tooltip>
                      </span>
                    </span>
                  }
                  name="codUsuario_indicador"
                  formulario={form}
                  width={"w-[80%]"}
                  error="Selecione o vendedor responsável"
                  required
                  options={usuarios
                    ?.filter(
                      (u: any) =>
                        String(u?.status_usuario) === "1" &&
                        (u?.comissionado_usuario == "1" ||
                          u?.cargo_perfil == "2") &&
                        (perfil?.visualiza_todos_contatos_perfil == "1"
                          ? true
                          : String(u?.id_usuario) === String(usuario?.id_usuario)),
                    )
                    ?.map((u: any) => ({
                      value: String(u.id_usuario),
                      label: u.nome_usuario,
                    }))}
                  defaultValue={
                    defaultValues?.codUsuario_indicador
                      ? String(defaultValues.codUsuario_indicador)
                      : undefined
                  }
                  skipEffect
                />
              )}
            </InputGroup>

            {children}
          </form>
        </TabsContent>
        <TabsContent value="pagamento">
          <ReactTable
            columns={columns}
            listFunction={listFunction}
            idCol="id_meio_recebimento"
            isActiveCol="status_meio_recebimento"
            canEdit
            formatFunction={formatarMetodoRecebimento}
            editFunction={editarMeioPagamentoIndicador}
            createFunction={criarMeioPagamento}
            Form={FormMeioRecebimentoIndicador}
            pageName="Meios Pagamento"
            actionButtons={(
              rowData: any,
              updateTable: any,
              setIsLoading: any
            ) => [
                {
                  className: "bg-error text-white",
                  onClick: (e: any) =>
                    handleSweetAlert(
                      {
                        icon: "question",
                        title: "Remover Permanentemente",
                        html: `Tem certeza que deseja <b>deletar permantentemente</b> o metodo de pagamento numero ${rowData.id_meio_recebimento}?`,
                      },
                      () => {
                        deleteMeioPagamento(rowData.id_meio_recebimento).then(
                          () => {
                            updateTable();
                            setIsLoading(false);
                          }
                        );
                      }
                    ),
                  content: <FaTrash />,
                },
              ]}
          />
        </TabsContent>
      </Tabs>
    </>
  );
};

export default FormIndicadores;