import clsx from "clsx";
import React from "react";

import { Logo } from "../icons/Logo";
import { LogoDark } from "../icons/LogoDark";
import { localStorageKeys } from "../localStorageKeys";
import { Menu } from '../SidebarCollapser copy';
import { ProSidebarProvider } from '../SidebarCollapser copy/ProSidebarProvider';
import { makeStyles, useTheme } from "../theme";
import useLocalStorage from "../tools/useLocalStorage";
import { ExpandButton } from "./ExpandButton";
import { MenuItem, menuWidth, shrunkMenuWidth } from "./MenuItem";
import { BaseSidebarProps } from "./types";

const useStyles = makeStyles(
  (theme) => ({
    expandButton: {
      marginLeft: theme.spacing(1.5),
    },
    float: {
      height: "100vh",
      position: "fixed",
      overflowY: "auto",
      overflowX: "hidden",
      paddingBottom: theme.spacing(3),
    },
    logo: {
      display: "block",
      margin: `36px 0 ${theme.spacing(3)} ${theme.spacing(2.5)}`,
      color: "inherit",
    },
    root: {
      transition: "width 0.5s ease",
      width: menuWidth,
    },
    rootShrink: {
      width: shrunkMenuWidth,
    },
    toolbarContainer: {
      margin: theme.spacing(1, 0, 1, 1.5),
    },
  }),
  {
    name: "SideBar",
  }
);

export interface SidebarProps extends BaseSidebarProps {
  activeId: string;
}

export const SidebarGzup: React.FC<SidebarProps> = ({
  activeId,
  menuItems,
  toolbar,
  onMenuItemClick,
  logoHref,
  linkComponent,
}) => {
  const classes = useStyles({});
  const { value: isShrunkStr, setValue: setShrink } = useLocalStorage(
    localStorageKeys.menuShrink,
    false.toString()
  );
  const isShrunk = isShrunkStr === "true";
  const { themeType } = useTheme();

  const Link = linkComponent ?? "a";

  return (
    <ProSidebarProvider>
        <Menu>
          <div
            className={clsx(classes.root, {
              [classes.rootShrink]: isShrunk,
            })}
          >
            <div className={classes.float}>
              <Link href={logoHref} className={classes.logo}>
                {themeType === "dark" ? <LogoDark /> : <Logo />}
              </Link>
              {menuItems.map((menuItem) =>
                linkComponent ? (
                  <MenuItem
                    activeId={activeId}
                    isMenuShrunk={isShrunk}
                    setShrink={setShrink}
                    menuItem={menuItem}
                    key={menuItem.ariaLabel}
                    linkComponent={linkComponent}
                  />
                ) : (
                  <MenuItem
                    activeId={activeId}
                    isMenuShrunk={isShrunk}
                    setShrink={setShrink}
                    menuItem={menuItem}
                    onClick={onMenuItemClick}
                    key={menuItem.ariaLabel}
                  />
                )
              )}
              {toolbar && <div className={classes.toolbarContainer}>{toolbar}</div>}
              <ExpandButton
                className={classes.expandButton}
                isShrunk={isShrunk}
                onClick={() => setShrink((!isShrunk).toString())}
              />
            </div>
          </div>
      </Menu>
    </ProSidebarProvider>
  );
};

SidebarGzup.displayName = "SideBarGzup";