import { LoginOutlined } from "@ant-design/icons";
import { ConfigProvider, Layout, Menu, SiderProps } from "antd";
import { useEffect, useRef, useState } from "react";
import { useLocation } from "react-router-dom";
import { COLOR } from "ThemeConstants";
import useSidebarItems from "./useSidebarItems";

const { Sider } = Layout;
type SideNavProps = SiderProps;

const SideNav = ({ ...others }: SideNavProps) => {
  const nodeRef = useRef(null);
  const { pathname } = useLocation();
  const [current, setCurrent] = useState("");

  useEffect(() => {
    const paths = pathname.split("/");
    setCurrent(paths[paths.length - 1]);
  }, [pathname]);

  const items = useSidebarItems();

  return (
    <Sider
      ref={nodeRef}
      collapsedWidth={105}
      breakpoint="lg"
      trigger={null}
      collapsed={true}
      {...others}
      style={{ background: "#FFF", overflow: "hidden" }}
      className="side-container"
    >
      <LoginOutlined
        color="blue"
        // asLink
        // href={PATHS.menu}
        // justify="center"
        // gap="small"
        // imgSize={{ h: 105, w: 105 }}
        // style={{ padding: "1rem 0" }}
        // src="/sidebar-logo.jpg"
      />
      <ConfigProvider
        theme={{
          components: {
            Menu: {
              itemBg: "none",
              itemSelectedBg: COLOR["100"],
              itemHoverBg: COLOR["50"],
              itemSelectedColor: COLOR["600"],
            },
          },
        }}
      >
        <Menu
          mode="inline"
          items={items}
          selectedKeys={[current]}
          style={{ border: "none" }}
          className="sidebar-menu-container"
        />
      </ConfigProvider>
    </Sider>
  );
};

export default SideNav;
