import DesignerContrato from "@/pages/CXESCFG001/Contrato/DesignerContrato";
import DesignerProposta from "@/pages/CXESCFG001/Proposta/DesignerProposta";
import HistoricoCliente from "@/pages/CXESCRM007";
import {
  anonimizacao,
  anonimizarUsuario,
  validarAnonimizacao,
} from "@/requests/CRUD/Usuario/editarUsuario";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { FaUserSecret } from "react-icons/fa";
import { IoMdRefresh } from "react-icons/io";
import { flexRender } from "@tanstack/react-table";
import {
  MdAssignment,
  MdBook,
  MdEdit,
  MdOutlineToggleOff,
  MdOutlineToggleOn,
  MdPerson,
} from "react-icons/md";
import Swal from "sweetalert2";
import Button from "../Forms/Button";
import InputVerification from "../Forms/InputVerification";
import ModalComponente from "../Modal/ModalComponente";
import ModalReact from "../Modal/ModalReact";
const ReactTableRow = ({
  row,
  guardaDado,
  canEdit,
  canDesactive,
  canRefresh,
  isActiveCol,
  idCol,
  editFunction,
  listFunction,
  refreshFunction,
  historicoFunction,
  PropostaFunction,
  ContratoFunction,
  Form,
  setData,
  disabledFields,
  pageName,
  modalWidth,
  canhistorico,
  canProposta,
  canContrato,
  canAnon,
  actionButtons,
  columns,
  data: listData,
  rowClassName,
}: any) => {
  // const isActive = Boolean(+row.original[isActiveCol]);
  const rowOriginal = listData.find((e: any, index: any) =>
    !e[idCol] ? e[idCol] == row.original[idCol] : index == row.index
  );
  const isActive = rowOriginal?.[isActiveCol] == "1";
  const [timer, setTimer] = useState(30);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [openModalEdiStatus, setOpenModalEdiStatus] = useState<boolean>(false);
  const [defaultValues, setDefaultValues] = useState<any>({});
  const [openModalEdit, setOpenModalEdit] = useState<boolean>(false);
  const [openModalHistorico, setOpenModalHistorico] = useState<boolean>(false);
  const [openModalProposta, setOpenModallProposta] = useState<boolean>(false);
  const [openModalContrato, setOpenModalContrato] = useState<boolean>(false);
  const [openModalAnon, setOpenModalAnon] = useState<boolean>(false);
  const [openModalVerify, setOpenModalVerify] = useState<boolean>(false);

  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const { isMobile, openMenu } = useScreenContext();
  const clearLocalStorage = () => {
    const keysToRemove = [
      "checkedValues",
      "configuracoes-card",
      "configuracoes-gerais",
      "configuracoes-menu",
      "configuracoes-proposta",
      "etapasId",
      "menusId",
      "funisId",
    ];
    keysToRemove.forEach((key) => localStorage.removeItem(key));
  };

  useEffect(() => {
    setIsLoading(false);
  }, [isActive]);

  useEffect(() => {
    let interval: any;

    if (timer > 0) {
      interval = setInterval(() => {
        setTimer((prevTimer) => prevTimer - 1);
      }, 1000);
    }

    return () => clearInterval(interval);
  }, [timer]);

  function openEdit(oldData: any) {
    setDefaultValues(oldData);
    isMobile ? openMenu(formEditDynamic(oldData)) : setOpenModalEdit(true);
  }

  function openHistorico(oldData: any) {
    setDefaultValues(oldData);
    setOpenModalHistorico(true);
  }

  function openProposta(oldData: any) {
    setDefaultValues(oldData);
    setOpenModallProposta(true);
  }

  function openContrato(oldData: any) {
    setDefaultValues(oldData);
    setOpenModalContrato(true);
  }

  const handleValidade = (data: FieldValues) => {
    setIsLoading(true);
    const codigoEmailValues = {
      codigo_email: data
        .filter((value: any) => typeof value === "string")
        .join(""),
    };
    data["codigo"] = codigoEmailValues.codigo_email;
    data["id"] = row.original[idCol];
    data["nome"] = session.nome_usuario;

    validarAnonimizacao(data)
      .finally(() => {
        setIsLoading(false);
      })
      .then(() => {
        Swal.fire({
          title: "Você tem certeza ?",
          text: "Está ação é irreversível!",
          showDenyButton: true,
          confirmButtonText: "Confirmar",
          confirmButtonColor: "#4CAF50",
          denyButtonText: `Recusar`,
          denyButtonColor: "#FF0000",
        }).then((result) => {
          if (result.isConfirmed) {
            const dados = {
              tipo_dado: guardaDado,
              id: row.original[idCol],
            };
            anonimizacao(dados).then(() => {
              setOpenModalVerify(false);
              listFunction().then((res: any) => {
                // localStorage.setItem("tableList", JSON.stringify(res));
                setData(res);
                setOpenModalEdit(false);
                setOpenModalEdiStatus(false);
              });
            });
          } else if (result.isDenied) {
            Swal.fire("Anonimização Não Realizada", "", "info");
          }
        });
      });
  };

  const openEdiStatus = (oldData: any) => {
    setDefaultValues(oldData);
    setOpenModalEdiStatus(true);
  };

  const refresh = (data: any) => {
    refreshFunction(data);
  };

  const onSubmitFunction = async (newData: any) => {
    setIsLoading(true);
    // editFunction(newFormData);
    return editFunction({ ...defaultValues, ...newData })
      .then(() => {
        listFunction().then((res: any) => {
          // localStorage.setItem("tableList", JSON.stringify(res));
          setData(res);
          setOpenModalEdit(false);
          setOpenModalEdiStatus(false);
        });
      })
      .finally(() => setIsLoading(false));
  };

  const updateTable = async () => {
    setIsLoading(true);
    return listFunction()
      .then((res: any) => {
        // localStorage.setItem("tableList", JSON.stringify(res));
        setData(res);
        return res;
      })
      .finally(() => {
        setIsLoading(false);
      });
  };
  const formEditDynamic = (oldData?: any) => {
    const valores =
      Object.keys(defaultValues).length > 0 ? defaultValues : oldData;
    return (
      <Form
        onSubmitFunction={onSubmitFunction}
        defaultValues={valores}
        disabledFields={disabledFields}
        className="p-4"
        columns={columns}
        listdata={listData}
        origin={"edit"}
      >
        <div className="flex w-full justify-end sticky left-[100%] bottom-0 p-2  bg-white dark:bg-black">
          <Button loading={isLoading} className=" bg-success rounded-md">
            Salvar
          </Button>
        </div>
      </Form>
    );
  };

  return (
    <>
      {historicoFunction && (
        <ModalComponente
          hasForm={false}
          header={` Historico  do ${pageName} (ID: ${row.original[idCol]})`}
          opened={openModalHistorico}
          hasSaveButton={false}
          onClose={() => setOpenModalHistorico(false)}
          className={modalWidth || "overflow-x-hidden"}
        >
          <HistoricoCliente idColuna={row.original[idCol]} />
        </ModalComponente>
      )}
      {openModalProposta && (
        <ModalComponente
          hasForm={false}
          header={`Template da Proposta`}
          opened={openModalProposta}
          hasSaveButton={false}
          onClose={() => setOpenModallProposta(false)}
          className={modalWidth || "overflow-x-hidden"}
        >
          <DesignerProposta
            defaultValues={defaultValues}
            onSubmitFunction={onSubmitFunction}
          />
        </ModalComponente>
      )}

      {openModalContrato && (
        <ModalComponente
          hasForm={false}
          header={`Template do Contrato`}
          opened={openModalContrato}
          hasSaveButton={false}
          onClose={() => setOpenModalContrato(false)}
          className={modalWidth || "overflow-x-hidden"}
        >
          <DesignerContrato
            defaultValues={defaultValues}
            onSubmitFunction={onSubmitFunction}
          />
        </ModalComponente>
      )}

      {/* {openModalHistorico && (
        <ModalComponente
          hasForm={false}
          header={`Histórico Cliente`}
          opened={openModalHistorico}
          hasSaveButton={false}
          onClose={() => setOpenModalHistorico(false)}
          className={modalWidth || "overflow-x-hidden"}
        >
          <HistoricoCliente idColuna={idCol} />
        </ModalComponente>
      )} */}

      {Form && (
        <ModalComponente
          hasForm={false}
          header={`Edição de ${pageName} (ID: ${row.original[idCol]})`}
          opened={openModalEdit}
          hasSaveButton={false}
          onClose={() => {
            setOpenModalEdit(false);
            clearLocalStorage(); // Limpa os itens do localStorage ao fechar o modal
          }}
          className={modalWidth || "overflow-x-hidden"}
        >
          {formEditDynamic()}
        </ModalComponente>
      )}

      <ModalReact
        open={openModalEdiStatus}
        onClose={() => setOpenModalEdiStatus(false)}
      >
        <div className="border-b p-4 flex items-center justify-center">
          <h1>
            Tem certeza que deseja{" "}
            <span className={`underline decoration-1`}>
              {isActive ? "Desativar" : "Ativar"}
            </span>{" "}
            o registro: {row.original[idCol]}?
          </h1>
        </div>
        <div className="flex w-full gap-1 p-4 justify-center">
          <Button
            type="button"
            className="bg-body"
            onClick={() => setOpenModalEdiStatus(false)}
          >
            Cancelar
          </Button>
          <Button loading={isLoading} onClick={() => onSubmitFunction({})}>
            Confirmar
          </Button>
        </div>
      </ModalReact>

      <tr className={rowClassName ? rowClassName(row) : ""}>
        {(canEdit ||
          canDesactive ||
          canRefresh ||
          canhistorico ||
          canProposta ||
          canContrato ||
          canAnon ||
          actionButtons) && (
            <td>
              <div className="flex gap-1">
                {canEdit && (
                  <button
                    className="navButton buttonWarning"
                    title="Editar"
                    type="button"
                    onClick={() => {
                      // let localData = rowOriginal;
                      // if (localData != null) {
                      //   // localData = JSON?.parse(localData);
                      // }
                      // let data: any = [];
                      // if (localData != null) {
                      //   data = localData;
                      // }
                      openEdit(
                        rowOriginal
                        // data.find((e: any) => e[idCol] == row.original[idCol])
                      );
                    }}
                  >
                    <MdEdit />
                  </button>
                )}
                {canhistorico && (
                  <button
                    className="navButton buttonWarning"
                    title="Historico do Cliente"
                    onClick={() => {
                      let localData = rowOriginal;
                      if (localData != null) {
                        // localData = JSON?.parse(localData);
                      }
                      let data: any = [];
                      if (localData != null) {
                        data = localData;
                      }
                      openHistorico(rowOriginal);
                    }}
                  >
                    <MdPerson />
                  </button>
                )}

                {canProposta && (
                  <button
                    className="navButton buttonWarning"
                    title="Template da proposta"
                    onClick={() => {
                      let localData = rowOriginal;
                      if (localData != null) {
                        // localData = JSON.parse(localData);
                      }
                      let data: any = [];
                      if (localData != null) {
                        data = localData;
                      }
                      openProposta(rowOriginal);
                    }}
                  >
                    <MdAssignment />
                  </button>
                )}
                {canContrato && (
                  <button
                    className="navButton buttonWarning"
                    title="Template do Contrato"
                    onClick={() => {
                      let localData = rowOriginal;
                      if (localData != null) {
                        // localData = JSON.parse(localData);
                      }
                      let data: any = [];
                      if (localData != null) {
                        data = localData;
                      }
                      openContrato(rowOriginal);
                    }}
                  >
                    <MdBook />
                  </button>
                )}
                {canDesactive && (
                  <button
                    disabled={isLoading}
                    className={`navButton ${isActive ? "buttonSuccess" : "buttonDanger"}`}
                    title={isActive ? "Desativar" : "Ativar"}
                    onClick={() => {
                      // setIsLoading(true);
                      const rowData: any = row.original;
                      const newData: any = {};
                      newData[isActiveCol] = !isActive;
                      newData[idCol] = rowData[idCol];
                      openEdiStatus(newData);
                    }}
                  >
                    {isActive ? <MdOutlineToggleOn /> : <MdOutlineToggleOff />}
                  </button>
                )}
                {canRefresh && (
                  <button
                    disabled={isLoading}
                    className={"navButton buttonWarning"}
                    title={"Redefinir"}
                    onClick={() => {
                      const rowData: any = row.original;
                      const newData: any = {};

                      newData["email_usuario"] = rowData["email_usuario"];
                      newData[idCol] = rowData[idCol];
                      refresh(newData);
                    }}
                  >
                    <IoMdRefresh />
                  </button>
                )}
                {canAnon && !isActive && (
                  <>
                    <button
                      disabled={isLoading}
                      className="navButton buttonAnon"
                      title={"Redefinir"}
                      onClick={() => {
                        const rowData: any = row.original;
                        const newData: any = {};
                        newData[idCol] = rowData[idCol];
                        newData["nome_usuario"] = rowData["nome_usuario"];
                        //(newData);
                        setOpenModalAnon(true);
                      }}
                    >
                      <FaUserSecret />{" "}
                    </button>
                    <ModalReact
                      open={openModalAnon}
                      onClose={() => setOpenModalAnon(false)}
                    >
                      <div className="p-2 text-xl text-center flex flex-col justify-center">
                        <h1>
                          Tem certeza que deseja Anonimização{" "}
                          <strong> {row.original.nome_usuario} </strong>
                          <strong>ID:{row.original[idCol]}</strong>
                        </h1>{" "}
                        <p className="text-base border-[1px] border-stroke rounded-lg mt-5 bg-stroke p-4 dark:bg-black">
                          <strong>
                            Reiteramos que a execução desta ação resultará na
                            criptografia de todos os dados do Usuário/Cliente,
                            culminando na Anonimização completa de seus registros
                            dos arquivos da empresa.
                          </strong>
                        </p>
                      </div>
                      <span
                        className="cursor-pointer mt-2 text-sm p-2 hover:text-primary"
                        onClick={() => {
                          setOpenModalVerify(true);
                          setTimer(30);
                          setOpenModalAnon(false);
                        }}
                      >
                        Ja possuo o Código!
                      </span>
                      <div className="flex w-full justify-center gap-1 p-5 ">
                        <Button
                          type="button"
                          className="bg-error px-6 text-sm"
                          onClick={() => setOpenModalAnon(false)}
                        >
                          Cancelar
                        </Button>
                        <Button
                          className="px-6 text-sm"
                          loading={isLoading}
                          onClick={() => {
                            setIsLoading(true);
                            const dados = {
                              nome: session.nome_usuario,
                              id: row.original[idCol],
                              email: session.email_usuario,
                              id_responsavel: session.id_usuario,
                              tipo_dado: guardaDado,
                            };

                            anonimizarUsuario(dados)
                              .finally(() => {
                                setIsLoading(false);
                              })
                              .then(() => {
                                setOpenModalVerify(true);

                                setTimer(30);
                                setOpenModalAnon(false);
                              });
                          }}
                        >
                          Confirmar
                        </Button>
                      </div>
                    </ModalReact>{" "}
                    {openModalVerify && (
                      <ModalReact
                        open={openModalVerify}
                        onClose={() => setOpenModalVerify(false)}
                      >
                        <div className="p-2">
                          <p className="p-2 border-[1px] rounded-md border-stroke bg-stroke text-center dark:bg-black">
                            Preencha o código que foi enviado ao email:{" "}
                            <strong>{session.email_usuario}</strong> para poder
                            realizar a <strong>Anonimização</strong>
                          </p>
                          <InputVerification handleValidade={handleValidade}>
                            {" "}
                            <div className="flex justify-between mb-5 mt-2">
                              <button type="button" disabled={timer > 0}>
                                <span
                                  className="text-sm  dark:text-white"
                                  onClick={async () => {
                                    const dados = {
                                      nome: session.nome_usuario,
                                      id: row.original.id_usuario,
                                      email: session.email_usuario,
                                      id_responsavel: session.id_usuario,
                                      tipo_dado: guardaDado,
                                    };

                                    await anonimizarUsuario(dados);
                                  }}
                                >
                                  Reenviar Código {timer > 0 && `(${timer}s)`}
                                </span>
                              </button>
                            </div>
                            <div className="flex items-center justify-center pt-6">
                              <Button
                                className="w-full bg-primary"
                                loading={isLoading}
                              >
                                Confirmar
                              </Button>
                            </div>
                          </InputVerification>
                        </div>
                      </ModalReact>
                    )}
                  </>
                )}
                {actionButtons &&
                  (typeof actionButtons == "object"
                    ? actionButtons
                    : actionButtons(row.original, updateTable, setIsLoading, {
                      idCol,
                      isActive,
                      isActiveCol,
                      pageName,
                      editFunction,
                      listData,
                      rowOriginal,
                      openEdit,
                      rowIndex: row.index,
                    })
                  ).map(
                    (button: any, index: number) =>
                      button.content && (
                        <button
                          disabled={button.disabled || isLoading}
                          title={button.title}
                          type="button"
                          className={`navButton ${button.className}`}
                          onClick={(e) => {
                            if (button.onClick) button.onClick(e);
                          }}
                          key={index}
                        >
                          {button.content}
                        </button>
                      )
                  )}
              </div>
            </td>
          )}
        {row.getVisibleCells().map((cell: any) => (
          <td
            key={cell.id}
            style={{
              width: cell.column.getSize(),
              color:
                cell.column.id != isActiveCol
                  ? ""
                  : isActive
                    ? "#1F9254"
                    : "#A30D11",
              fontWeight: cell.column.id == isActiveCol ? "700" : "500",
              textAlign: "center",
            }}
            className={`text-${cell.column.id != isActiveCol
                ? " text-black dark:text-white"
                : isActive
                  ? "[#1F9254]"
                  : "[#A30D11]"
              } ${cell.column.columnDef.className}`}
          >
            {cell.column.id != isActiveCol ? (
              cell.column.columnDef.cell
                ? flexRender(cell.column.columnDef.cell, cell.getContext())
                : cell.renderValue()
            ) : (
              <div
                className={`flex ${isActive
                  ? " bg-[#a1fcc8] border border-[#4ed18b]"
                  : "bg-[#fa6f74] border border-[#e05357]"
                  } rounded-xl px-2 justify-center text-sm`}
              >
                {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
                {isActive ? "Ativo" : "Inativo"}
              </div>
            )}
          </td>
        ))}
      </tr>
    </>
  );
};

export default ReactTableRow;