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

import { For, Show, type JSX } from "solid-js";
import { useAppShellData } from "../data/app-shell.context";
import { type RailItem } from "../data/shell.data";
import styles from "./LeftRail.module.scss";

type RailEntryProps = {
	item: RailItem;
	label: string;
	abbreviation: string;
	personal?: boolean;
};

const RailEntry = (props: RailEntryProps): JSX.Element => {
	return (
		<div
			classList={{
				[styles.itemSlot]: true,
				[styles.itemSlotActive]: !!props.item.active,
			}}
		>
			<span class={styles.activeIndicator} aria-hidden="true" />

			<button
				type="button"
				classList={{
					[styles.workspaceButton]: true,
					[styles.workspaceButtonActive]: !!props.item.active,
					[styles.personalButton]: !!props.personal,
				}}
				aria-label={props.label}
				title={props.label}
			>
				{props.abbreviation}
			</button>

			<span class={styles.hoverLabel} role="presentation">
				{props.label}
			</span>
		</div>
	);
};

type LeftRailProps = {
	collapsed: boolean;
};

export const LeftRail = (props: LeftRailProps): JSX.Element => {
	const appShellData = useAppShellData();
	const personalItem = () => appShellData.railItems().find((item) => item.kind === "personal");
	const organizationItems = () => appShellData.railItems().filter((item) => item.kind === "organization");

	return (
		<aside
			classList={{
				[styles.rail]: true,
				[styles.railCollapsed]: props.collapsed,
			}}
			aria-label="Server rail"
		>
			<div class={styles.topCluster}>
				<Show when={!props.collapsed && personalItem()}>
					{(item): JSX.Element => (
						<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
					)}
				</Show>

				<Show when={!props.collapsed}>
					<div class={styles.sectionDivider} aria-hidden="true" />
				</Show>
			</div>

			<Show when={!props.collapsed}>
				<div class={styles.items}>
					<For each={organizationItems()}>
						{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
					</For>
				</div>
			</Show>
		</aside>
	);
};