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();
	const 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>
	);
}