import React from "react";
import { AddWorkspaceModal } from "../AddWorkspaceModal";
import { SidebarWorkspace } from "../SidebarWorkspace";
import { GlobalContext } from "@/context/Global";

const DefaultSidebar = ({
  list,
  setWorkspaces,
  setActiveLeftPanel,
  setActiveWorkspaceId,
}) => {
  const {
    state: { path },
    dispatch: globalDispatch,
  } = React.useContext(GlobalContext);
  const [addWorkspaceOpen, setAddWorkspaceOpen] = React.useState(false);

  const onCloseAddWorkspaceModal = React.useCallback(() => {
    setAddWorkspaceOpen(false);
  }, [addWorkspaceOpen]);
  function handleStaticSidebarItemClick(path) {
    globalDispatch({
      type: "SETPATH",
      payload: {
        path,
      },
    });
  }
  function handleWorkspaceSidebarItemClick(id) {
    setActiveLeftPanel("workspace");
    setActiveWorkspaceId(id);
    globalDispatch({
      type: "SETPATH",
      payload: {
        path: `${id}`,
      },
    });
  }
  return (
    <>
      <div
        className={`overflow-y-auto rounded-md py-4 text-[#172B4D] shadow-[0_0_2px_2px_#c3c9ff5e]`}
      >
        <div className={` m-auto w-[15rem] py-7`}>
          {/*  */}
          <div
            className={`flex w-full flex-col items-center justify-start border-b-2 border-b-slate-200 pb-2`}
          >
            <div
              onClick={() => handleStaticSidebarItemClick("boards")}
              className={`m-0 mb-2 h-[2rem] w-full rounded-md border-none p-[0.375rem_0.5rem_0.375rem] text-left text-[1rem] font-bold text-[#172B4D] outline-none hover:bg-[#091e4214] ${path === "boards" ? "bg-[#E4F0F6]" : ""
                }`}
            >
              Boards
            </div>
            <div
              onClick={() => handleStaticSidebarItemClick("home")}
              to={`/pm/dashboard`}
              className={`m-0 mb-2 h-[2rem] w-full rounded-md border-none p-[0.375rem_0.5rem_0.375rem] text-left text-[1rem] font-bold text-[#172B4D] outline-none hover:bg-[#091e4214] ${path === "home" ? "bg-[#E4F0F6]" : ""
                }`}
            >
              Home
            </div>
          </div>
          {/*  */}
          <div className={`w-full`}>
            <div
              className={`flex h-[2rem] w-full items-center justify-between p-[0.375rem_0.5rem_0.375rem] text-[#5E6C84]`}
            >
              <div className={`flex h-full items-center p-[0.5rem_0] text-xs`}>
                Workspaces
              </div>{" "}
              <button
                className={`flex h-5 w-5 cursor-pointer items-center justify-center rounded p-[0.375rem] text-2xl hover:bg-[#091e4214]`}
                onClick={() => setAddWorkspaceOpen(true)}
              >
                +
              </button>
            </div>
            {/*  */}
            {list.map((ws) => (
              <SidebarWorkspace
                key={ws.id}
                ws={ws}
                handleClick={handleWorkspaceSidebarItemClick}
              />
            ))}
            {/*  */}
          </div>
        </div>
      </div>

      <AddWorkspaceModal
        modalCloseClick={onCloseAddWorkspaceModal}
        modalHeader
        isOpen={addWorkspaceOpen}
        setWorkspaces={setWorkspaces}
        setAddWorkspaceOpen={setAddWorkspaceOpen}
      />
    </>
  );
};

export default DefaultSidebar;
