import { useState, useMemo } from 'react';
import { NavLink, matchPath, useLocation, useMatches } from 'react-router-dom';
import { Layout, Menu, theme } from 'antd';
import type { MenuProps } from 'antd';
import { CustomRouteObject } from '@web/src/routes/types';

const { Sider } = Layout;
const { useToken } = theme;

type SidebarProps = {
  routes: CustomRouteObject[];
};

export default function AdminSidebar({ routes }: SidebarProps) {
  const [collapsed, setCollapsed] = useState(false);
  const { token } = useToken();
  let matches = useMatches();
  console.log(matches)
  const menuItems: MenuProps['items'] = useMemo(() =>
    routes.map(route => ({
      key: route.path,
      icon: route.icon,
      label: (
        <NavLink
          to={route.path}

        >
          {route.name}
        </NavLink>
      ),
    }))
    , [routes]);

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={(value) => setCollapsed(value)}
      width={150}
      className="h-screen sticky top-0"
      style={{
        backgroundColor: token.colorBgContainer,
        borderRight: `1px solid ${token.colorBorderSecondary}`
      }}
    >
      <Menu
        theme="light"
        mode="inline"
        selectedKeys={routes
          .filter(route => matches.some(match => match.pathname.includes(route.path)))
          .map(route => route.path)}

        items={menuItems}
        className="border-r-0"
        style={{
          borderRight: 0
        }}
      />
    </Sider>
  );
}