import React from "react";
import MkdSDK from "@/utils/MkdSDK";
import { GlobalContext } from "@/context/Global";

const sdk = new MkdSDK();

const WorkspaceSidebar = ({
  activeWorkspaceId,
  handleSidebarClick,
  handleBackButton,
}) => {
  const [workspace, setWorkspace] = React.useState({});
  const {
    state: { path },
  } = React.useContext(GlobalContext);

  const getSingleWorkspace = async () => {
    try {
      const res = await sdk.getWorkspace(activeWorkspaceId);
      if (res) {
        setWorkspace(res.model);
      }
    } catch (err) {
      console.log("error" + " " + err);
    }
  };

  React.useEffect(() => {
    (async () => {
      await getSingleWorkspace();
    })();
  }, []);

  return (
    <div
      className={` rounded-md py-4 text-[#172B4D] shadow-[0_0_2px_2px_#c3c9ff5e]`}
    >
      <div className={`m-auto w-[15rem]`}>
        <svg
          onClick={handleBackButton}
          fill="#000000"
          width="35px"
          height="35px"
          viewBox="0 0 100 100"
        >
          <g>
            <path
              d="M74.656,56.818c3.895,3.729,5.788,8.795,5.788,15.491c0,1.104,0.896,2,2,2s2-0.885,2-1.989
                    c0-7.736-2.362-13.91-7.022-18.369C66.646,43.639,46.325,44.551,30,45.269c-2.28,0.101-4.461,0.211-6.499,0.28L38.428,30.62
                    c0.781-0.781,0.781-2.047,0-2.828s-2.048-0.781-2.828,0L17.479,45.915c-0.375,0.375-0.586,0.884-0.586,1.414
                    s0.211,1.039,0.586,1.414l18.123,18.12c0.391,0.391,0.902,0.586,1.414,0.586s1.024-0.195,1.415-0.586
                    c0.781-0.781,0.781-2.048,0-2.828L24.142,49.75c1.915-0.11,3.932-0.261,6.033-0.354C44.919,48.748,65.114,47.688,74.656,56.818z"
            />
          </g>
        </svg>
        <div
          className={`my-2 flex  h-[3.8125rem] w-full items-center justify-start rounded border-b p-[0.375rem_0.5rem_0.375rem_0] ${
            Number(path) === true ? "bg-slate-300" : ""
          }`}
        >
          <div className={`p-[0.375rem_0.5rem_0.375rem]`}>
            <div
              className={`flex h-[2.3215rem] w-[2.3215rem] items-center justify-center rounded bg-gradient-to-tr from-[#006644] to-[#00875a] text-[1rem] font-semibold uppercase text-white`}
            >
              {"D"}
            </div>
          </div>
          <span className={`text-sm font-bold text-[#172B4D]`}>
            {workspace.name ? workspace.name : "N/A"}
          </span>
        </div>

        <div className={`flex w-full flex-col items-center justify-start`}>
          <div
            onClick={() => handleSidebarClick("workspaceBoards")}
            className={`m-0 mb-2  h-[2rem] w-full rounded-md border-none p-[0.375rem_0.5rem_0.375rem] pb-2 text-left text-[1rem] text-[#172B4D] outline-none hover:bg-[#091e4214] ${
              path === "boards" ? "bg-[#E4F0F6]" : ""
            }`}
          >
            Boards
          </div>
          <div
            onClick={() => handleSidebarClick("workspaceMembers")}
            className={`m-0 mb-2 h-[2rem] w-full rounded-md border-none p-[0.375rem_0.5rem_0.375rem] text-left text-[1rem] text-[#172B4D] outline-none hover:bg-[#091e4214] ${
              path === "members" ? "bg-[#E4F0F6]" : ""
            }`}
          >
            Members
          </div>
          <div
            className={`m-0 mb-4 h-[2rem] w-full rounded-md border-none p-[0.375rem_0.5rem_0.375rem] text-left text-[1rem] text-[#172B4D] outline-none hover:bg-[#091e4214] ${
              path === "members" ? "bg-[#E4F0F6]" : ""
            }`}
          >
            Workspace Setting
          </div>
        </div>
      </div>
    </div>
  );
};
export default WorkspaceSidebar;
