// Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

import { For, Show, createSignal, type JSX } from "solid-js";
import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
import { serverSidebarItems } from "../data/shell.data";
import styles from "./WorkspaceSidebar.module.scss";

export const WorkspaceSidebar = (): JSX.Element => {
	const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);

	return (
		<aside class={styles.sidebar} aria-label="Server navigation">
			<div
				classList={{
					[styles.header]: true,
					[styles.headerDrawerOpen]: isProjectDrawerOpen(),
				}}
			>
				<ProjectSelector
					isOpen={isProjectDrawerOpen()}
					onToggle={(): void => {
						setIsProjectDrawerOpen(true);
					}}
					onClose={(): void => {
						setIsProjectDrawerOpen(false);
					}}
				/>
			</div>

			<div
				classList={{
					[styles.section]: true,
					[styles.sectionHidden]: isProjectDrawerOpen(),
				}}
			>
				<span class={styles.sectionLabel}>Navigation</span>
				<div class={styles.navScroller}>
					<ul class={styles.navList} role="list">
						<For each={serverSidebarItems}>
							{(item): JSX.Element => {
								const Icon = item.icon;

								return (
									<li>
										<button
											type="button"
											classList={{
												[styles.navItem]: true,
												[styles.navItemActive]: !!item.active,
											}}
										>
											<Icon class={styles.icon} size={18} strokeWidth={2} />
											<span class={styles.label}>{item.label}</span>
											<Show when={item.meta}>
												<span class={styles.itemMeta}>{item.meta}</span>
											</Show>
										</button>
									</li>
								);
							}}
						</For>
					</ul>
				</div>
			</div>
		</aside>
	);
};