import React, { useRef } from "react";
import MkdSDK from "@/utils/MkdSDK";
import { AuthContext } from "@/context/Auth";
import { GlobalContext } from "@/context/Global";
import { useNavigate } from "react-router-dom";
import { LazyLoad } from "@/components/LazyLoad";
import { ModalSidebar } from "@/components/ModalSidebar";
import { MkdListTableV2 } from "@/components/MkdListTable";
// import { AddAdminEmailPage, EditAdminEmailPage } from "@/routes/LazyLoad";

let sdk = new MkdSDK();

const columns = [
  {
    header: "ID",
    accessor: "id",
    isFilter: true,
  },
  {
    header: "Email Type",
    accessor: "slug",
    isFilter: true,
  },
  {
    header: "Subject",
    accessor: "subject",
    isFilter: true,
  },
  {
    header: "Tags",
    accessor: "tag",
    isFilter: true,
  },
  {
    header: "Action",
    accessor: "",
    isFilter: false,
  },
];

const AdminEmailListPage = () => {
  const { dispatch } = React.useContext(AuthContext);
  const { dispatch: globalDispatch } = React.useContext(GlobalContext);
  const navigate = useNavigate();

  const [showAddSidebar, setShowAddSidebar] = React.useState(false);
  const [showEditSidebar, setShowEditSidebar] = React.useState(false);
  const [activeEditId, setActiveEditId] = React.useState();
  const refreshRef = useRef(null);

  const [selectedItems, setSelectedItems] = React.useState([]);

  const onToggleModal = (modal, toggle, ids = []) => {
    switch (modal) {
      case "add":
        setShowAddSidebar(toggle);
        // setSelectedItems(ids);
        break;
      case "edit":
        setShowEditSidebar(toggle);
        setSelectedItems(ids);
        setActiveEditId(ids[0]);
        break;
    }
  };

  return (
    <>
      <>
        <div className="overflow-x-auto  rounded bg-white p-5 shadow">
          <LazyLoad>
            <MkdListTableV2
              columns={columns}
              tableRole={"admin"}
              table={"email"}
              // tableTitle={"EMAIL"}
              actionId={"id"}
              // defaultFilter={[`actions,cs,hold`]}
              actions={{
                view: { show: false, action: null, multiple: false },
                edit: {
                  show: true,
                  multiple: false,
                  action: (ids) => onToggleModal("edit", true, ids),
                },
                delete: { show: true, action: null, multiple: false },
                select: { show: true, action: null, multiple: false },
                add: {
                  show: true,
                  action: () => onToggleModal("add", true),
                  multiple: false,
                  children: "Add New",
                  showChildren: true,
                },
                export: { show: false, action: null, multiple: true },
              }}
              actionPostion={`abovetable`}
              refreshRef={refreshRef}
            />
          </LazyLoad>
        </div>
      </>

      {/* <LazyLoad>
        <ModalSidebar
          isModalActive={showAddSidebar}
          closeModalFn={() => setShowAddSidebar(false)}
        >
          <AddAdminEmailPage setSidebar={setShowAddSidebar} />
        </ModalSidebar>
      </LazyLoad> */}
{/* 
      <LazyLoad>
        <ModalSidebar
          isModalActive={showEditSidebar}
          closeModalFn={() => setShowEditSidebar(false)}
        >
          <EditAdminEmailPage
            activeId={activeEditId}
            setSidebar={setShowEditSidebar}
          />
        </ModalSidebar>
      </LazyLoad> */}
    </>
  );
};

export default AdminEmailListPage;
