import LoaderSun from "@/components/common/Loader/LoaderSun";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { cadastrarCondicaoPagamento } from "@/requests/CRUD/CondicoesPagamento/cadastrarCondicaoPagamento";
import { editarCondicaoPagamento } from "@/requests/CRUD/CondicoesPagamento/editarCondicaoPagamento";
import { excluirCondicaoPagamento } from "@/requests/CRUD/CondicoesPagamento/excluirCondicaoPagamento";
import { listarCondicoesPagamento } from "@/requests/CRUD/CondicoesPagamento/listarCondicoesPagamento";
import { listarFormasPagamento } from "@/requests/CRUD/FormasPagamento/listarFormasPagamento";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useAuth } from "@/src/contexts/authContext";
import { filtrarPorSelecao, FormatFields, GetForm } from "@/utils";
import { Tooltip } from "@mui/material";
import { Info, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { RiErrorWarningFill } from "react-icons/ri";
import FormCondicoesPagamento from "./FormCondicoesPagamento";

export const tiposCondicoes = [
  { label: "À vista", value: "0" },
  { label: "Parcelado", value: "1" },
  // { label: "Personalizado (Mensal)", value: "2" },
  // { label: "Personalizado (Parcelado)", value: "3" },
];

export default function CondicoesPagamento({
  formLoja,
  loja,
  defaultFilters,
}: any) {
  const [lojas, setLojas] = useState<any[]>([]);
  const [tipos_negocio, setTiposNegocio] = useState<any[]>([]);
  const [formas_pagamento, setFormas_pagamento] = useState<any[]>([]);

  const [isLoaded, setIsLoaded] = useState(false);

  const { valuesSession, usuario, obterDadosUsuario } = useAuth();
  const formFiltro = GetForm();

  const filtro = formFiltro.watch();
  // const [filtro, setFiltro] = useState<any>({});

  function filtrarPorMultiSelecao(
    row: any,
    columnId: string,
    filterValue: any[]
  ) {
    if (!row.original[columnId]) {
      return true;
    }

    if (
      filterValue?.length == 0 ||
      filterValue.some(
        (optionSelected) =>
          optionSelected.value == "*" ||
          optionSelected.label == row.original[columnId]
      )
    ) {
      return true;
    }

    return false;
  }

  const filtrarPorMultiSelecaoEmArray = (
    row: any,
    columnId: string,
    filterValue: any[]
  ) => {
    if (!row.original[columnId] && filterValue?.length == 0) return true;

    return (
      filterValue?.length === 0 ||
      filterValue.some(
        (optionSelected) =>
          (optionSelected.value === "0" && !row.original[columnId]) ||
          (optionSelected.value === "*" &&
            (row.original[columnId] == "*" ||
              (columnId == "cod_lojas_condicao" &&
                row.original[columnId].split(", ")?.length ==
                  lojas?.length))) ||
          row.original[columnId]
            .split(", ")
            .some(
              (option: string) =>
                optionSelected.label == option ||
                (optionSelected.value != "0" &&
                  ["Todas", "Todos"].includes(option))
            )
      )
    );
  };

  function filtrarPorTexto(row: any, columnId: string, filterValue: string) {
    if (!row.original[columnId]) {
      return true;
    }

    if (
      filterValue == "" ||
      filterValue == "*" ||
      filterValue == "Todos" ||
      filterValue == row.original[columnId]
    ) {
      return true;
    }

    return false;
  }

  const columns = [
    {
      header: "Código",
      accessorKey: "id_condicao",
    },
    {
      header: "Status",
      accessorKey: "status_condicao",
    },
    {
      header: "Nome",
      accessorKey: "nome_condicao",
    },
    {
      header: "Forma que entra na Conta",
      accessorKey: "tipo_condicao",
      filterFn: filtrarPorSelecao,
    },
    {
      header: "Qtd Parcelas Máxima",
      accessorKey: "qtdParcelas_condicao",
    },
    // {
    //   header: "Prazos",
    //   accessorKey: "prazos_condicao",
    // },
    {
      header: "Juros",
      accessorKey: "taxa_juros_condicao",
    },
    // {
    //   header: "Periodicidade",
    //   accessorKey: "periodicidade_forma",
    // },
    {
      header: "Lojas",
      accessorKey: "cod_lojas_condicao",
      filterFn: filtrarPorMultiSelecaoEmArray,
    },
    {
      header: "Tipos de negócio",
      accessorKey: "cod_tipos_negocios",
      filterFn: filtrarPorMultiSelecaoEmArray,
    },
    {
      header: "Formas de Pagamento",
      accessorKey: "cod_formas_pagamento_condicao",
      filterFn: filtrarPorMultiSelecaoEmArray,
    },
  ];

  useEffect(() => {
    Promise.all([
      listarLojas().then((res) => {
        setLojas(res);
      }),
      listarTiposNegocios().then((res) => {
        setTiposNegocio(res);
      }),
      listarFormasPagamento().then((res) => {
        setFormas_pagamento(res);
      }),
    ]).finally(() => setIsLoaded(true));
    //   listarTodosCargos().then((res) => {
    //     setCargos(res);
    //   });
    //   listarPerfis().then(setPerfis);
    // }, []);
    // useEffect(() => {
    //   obterClienteLinksun(session.sigla).then((res) => {
    //     setTotalUsuContrato(res.usuarios_licenca_linksun);
    //   });
  }, []);

  async function formatarLista(arr: any[]) {
    return arr?.map((e) => {
      e["tipo_condicao"] = tiposCondicoes?.find(
        (tipo) => tipo.value == e["tipo_condicao"]
      )?.label;

      // e["qtdParcelas_forma"] = e?.qtdParcelas_forma
      //   ? `${e?.qtdParcelas_forma}x`
      //   : "";
      // e["periodicidade_forma"] = e?.periodicidade_forma
      //   ? `${e?.periodicidade_forma} dias`
      //   : "";

      e.cod_lojas_condicao =
        e.cod_lojas_condicao == "*"
          ? "Todas"
          : lojas
              ?.filter((loja) =>
                e?.cod_lojas_condicao?.split(",")?.includes(loja?.id_loja)
              )
              ?.map((loja) => loja?.nome_loja)
              ?.join(", ");
      e.cod_tipos_negocios =
        e.cod_tipos_negocios == "*"
          ? "Todos"
          : tipos_negocio
              ?.filter((tipo) =>
                e?.cod_tipos_negocios
                  ?.split(",")
                  ?.includes(tipo?.id_tipo_negocio)
              )
              ?.map((tipo) => tipo?.nome_tipo_negocio)
              ?.join(", ");
      e.taxa_juros_condicao = e?.taxa_juros_condicao
        ? `${FormatFields?.formatarNumero(e?.taxa_juros_condicao)}%`
        : "";
      e.cod_formas_pagamento_condicao =
        e.cod_formas_pagamento_condicao == "*"
          ? "Todas"
          : formas_pagamento
              ?.filter((forma) =>
                e?.cod_formas_pagamento_condicao?.split(",")?.includes(forma?.id_forma)
              )
              ?.map((forma) => forma?.nome_forma)
              ?.join(", ");
      return e;
    });
  }
  // const onSubmitFunction = async (data: FieldValues) => {

  //   // data["sigla"] = sigla;
  //   // data["empresa_usuario"] = idEmpresa || 1;
  //   // data["loja_usuario"] = data["loja_usuario"].join(",");
  //   // if (data["cargo_perfil"] == "2") {
  //   //   data["comissionado_usuario"] = "1";
  //   // }
  //   // delete data["cargo_perfil"];

  //   // return cadastrarUsuario({ ...data, corAvatar: randomBackgroundColor });
  // };

  // const onEdifFunction = async (data: FieldValues) => {

  //   if (data["loja_usuario"]) {
  //     data["loja_usuario"] = data["loja_usuario"].join(",");
  //   }
  //   if (data["cargo_perfil"] == "2") {
  //     data["comissionado_usuario"] = "1";
  //   }
  //   delete data["cargo_perfil"];

  //   return editarUsuario(data).then(async (resUsuario) => {
  //     if (usuario?.id_usuario) {
  //       await obterDadosUsuario(usuario?.id_usuario);
  //     }
  //     return resUsuario;
  //   });
  // };

  const CustomForm = useCallback(
    (props: any) => (
      <FormCondicoesPagamento
        {...props}
        lojas={lojas}
        tiposCondicoes={tiposCondicoes}
        tipos_negocio={tipos_negocio}
        formas_pagamento={formas_pagamento}
      />
    ),
    [lojas, tipos_negocio, formas_pagamento]
  );

  return (
    <>
      <div className="flex items-center gap-3 mb-4">
        <h2 className="text-xl max-sm:text-sm font-bold">
          {loja
            ? "Consulta de Condições de Pagamento Habilitadas para esta Loja"
            : "Cadastro de Condição de Pagamento"}
        </h2>
        {loja && (
          <Tooltip
            title={
              <div className="text-black-2">
                <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-4 rounded-md border-[#fcdcaa] shadow-sm">
                  <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                    <RiErrorWarningFill size={20} color="#ffb747" />
                  </div>
                  <p className="text-black ">
                    ATENÇÃO!! Para aparecer as condições de pagamento para a
                    loja, você deve cadastrá-las em Configurações Gerais na
                    opção &quot;Condições de Pagamento&quot; e habilitar para a
                    loja desejada.
                  </p>
                </div>
              </div>
            }
            componentsProps={{
              tooltip: {
                sx: {
                  bgcolor: "white",
                  color: "black",
                  fontSize: "0.75rem",
                  fontFamily: "Satoshi",
                  borderRadius: "0.375rem",
                  maxWidth: 900,
                  border: 1,
                  borderColor: "#bdb9b9",
                  p: 1,
                },
              },
            }}
            placement="top"
          >
            <button
              type="button"
              className="text-primary cursor-pointer p-1 rounded"
            >
              <Info size={19} />
            </button>
          </Tooltip>
        )}
      </div>
      <div>
        {isLoaded ? (
          <div className="flex flex-col gap-2">
            <div className="flex flex-row flex-wrap gap-3">
              {!loja && (
                <InputSelectComponent
                  name="cod_lojas_condicao"
                  label="Lojas"
                  isMulti
                  formulario={formFiltro}
                  options={[
                    { label: "Todas", value: "*" },
                    { label: "Nenhuma", value: "0" },
                    ...lojas?.map((loja: any) => ({
                      value: loja.id_loja,
                      label: loja.nome_loja,
                    })),
                  ]}
                  // onChange={(e: any) => {
                  //   const novasLojasSelecionadas = e.map(
                  //     (loja: any) => loja.value
                  //   );
                  //   setFiltro((prev: any) => ({
                  //     ...prev,
                  //     cod_lojas_condicao: e,
                  //   }));
                  //   // setLojasSelecionadas(novasLojasSelecionadas);
                  // }}
                  width="flex-1"
                />
              )}
              <InputSelectComponent
                name="cod_tipos_negocios"
                label="Tipos de Negócio"
                isMulti
                formulario={formFiltro}
                options={[
                  { label: "Todos", value: "*" },
                  { label: "Nenhum", value: "0" },
                  ...tipos_negocio?.map((tipo: any) => ({
                    value: tipo.id_tipo_negocio,
                    label: tipo.nome_tipo_negocio,
                  })),
                ]}
                // error={"Selecione uma Loja"}
                // required
                // defaultValue={
                //   defaultValues && defaultValues["cod_tipos_negocios"]
                // }
                defaultValue={
                  defaultFilters && defaultFilters["cod_tipos_negocios"]
                }
                // onChange={(e: any) => {
                //   const novasLojasSelecionadas = e.map(
                //     (loja: any) => loja.value
                //   );
                //   setFiltro((prev: any) => ({
                //     ...prev,
                //     cod_tipos_negocios: e,
                //   }));
                //   // setLojasSelecionadas(novasLojasSelecionadas);
                // }}
                width="flex-1"
              />
              <InputSelectComponent
                name="tipo_condicao"
                label="Forma que entra na Conta"
                formulario={formFiltro}
                options={[{ label: "Todos", value: "*" }, ...tiposCondicoes]}
                // onChange={(e: any) => {
                //   setFiltro((prev: any) => ({
                //     ...prev,
                //     tipo_condicao: e?.label,
                //   }));
                // }}
                width="flex-1"
              />
            </div>
            <ReactTable
              columns={columns}
              createFunction={loja ? undefined : cadastrarCondicaoPagamento}
              listFunction={async () =>
                listarCondicoesPagamento().then((res) =>
                  res?.filter(
                    (tipo: any) =>
                      (!loja ||
                        tipo?.cod_lojas_condicao == "*" ||
                        tipo?.cod_lojas_condicao
                          ?.split(",")
                          .includes(loja?.id_loja)) &&
                      (loja ? tipo?.status_condicao != "0" : true)
                  )
                )
              }
              formatFunction={formatarLista}
              idCol="id_condicao"
              isActiveCol="status_condicao"
              canEdit={!loja}
              canDesactive={!loja}
              editFunction={editarCondicaoPagamento}
              Form={CustomForm}
              pageName={"Condição de Pagamento"}
              filters={filtro}
              manualFilters
              actionButtons={(
                rowData: any,
                updateTable: any,
                setIsLoading: any,
                context: any
              ) => {
                const rowOriginal = context?.rowOriginal || rowData;
                const podeExcluir = true;

                return [
                  {
                    className: `navButton ${
                      podeExcluir
                        ? "buttonDanger"
                        : "buttonDanger opacity-50 cursor-not-allowed"
                    }`,
                    onClick: () => {
                      if (!podeExcluir) {
                        return;
                      }

                      handleSweetAlert(
                        {
                          icon: "warning",
                          title: "Excluir Condição de Pagamento",
                          html: `Tem certeza que deseja <b>Excluir</b> a condição ${rowData?.id_condicao}?`,
                        },
                        () => {
                          return excluirCondicaoPagamento({
                            id_condicao: rowData?.id_condicao,
                          }).then(() => updateTable());
                        }
                      );
                    },
                    content: (
                      <span title="Excluir Condição de Pagamento">
                        <Trash2 size={18} />
                      </span>
                    ),
                  },
                ];
              }}
              // columnFilters={filtro}
              // actionButtons={(
              //   rowData: any,
              //   updateTable: any,
              //   setIsLoading: any,
              //   {
              //     idCol,
              //     isActive,
              //     isActiveCol,
              //     pageName,
              //     editFunction,
              //     listData,
              //     rowOriginal,
              //   }
              // ) =>
              //   loja
              //     ? [
              //         {
              //           className: `navButton ${forma_pagamento_padrao_loja == rowData?.[idCol] ? "buttonSuccess" : "buttonDanger"} transition-all duration-300`,
              //           onClick: (e: any) => {
              //             if (forma_pagamento_padrao_loja != rowData?.[idCol])
              //               handleSweetAlert(
              //                 {
              //                   icon: "warning",
              //                   title: `Setar Conta Padrão`,
              //                   html: `Tem certeza que deseja setar esta forma como a padrão dessa loja?`,
              //                 },
              //                 async () => {
              //                   return editarLoja({
              //                     id_loja: loja?.id_loja,
              //                     forma_pagamento_padrao_loja: rowData[idCol],
              //                   }).then(() => {
              //                     setForma_pagamento_padrao_loja(
              //                       rowData[idCol]
              //                     );
              //                     formLoja.setValue(
              //                       "forma_pagamento_padrao_loja",
              //                       rowData[idCol]
              //                     );
              //                     updateTable();
              //                   });
              //                 }
              //               );
              //           },
              //           content:
              //             forma_pagamento_padrao_loja == rowData?.[idCol] ? (
              //               <Tooltip title="É a conta padrão">
              //                 <SquareCheckBig size={21} />
              //               </Tooltip>
              //             ) : (
              //               <Tooltip title="Setar conta como padrão">
              //                 <Square size={21} />
              //               </Tooltip>
              //             ),
              //         },
              //       ]
              //     : []
              // }
            />
          </div>
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
    </>
  );
}