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

import { For, type JSX } from "solid-js";
import type { Theme } from "../../../theme/runtime";
import { topBarActions } from "../data/shell.data";
import { DepartmentSelector } from "../DepartmentSelector/DepartmentSelector";
import { NotificationsNav } from "./NotificationsNav";
import { ThemeToggle } from "./ThemeToggle";
import { UserNav } from "./UserNav";
import styles from "./TopBar.module.scss";

type TopBarProps = {
	theme: Theme;
	onToggleTheme: VoidFunction;
	isMobileViewport: boolean;
	isNotificationsOpen: boolean;
	isProfileOpen: boolean;
	onToggleNotifications: VoidFunction;
	onToggleProfile: VoidFunction;
};

export const TopBar = (props: TopBarProps): JSX.Element => {
	return (
		<header class={styles.topBar} data-ui="top-bar">
			<div class={styles.identity} data-slot="top-bar-identity">
				<span class={styles.eyebrow}>Moku Work</span>
				<DepartmentSelector />
			</div>

			<div class={styles.controls} data-slot="top-bar-controls">
				<div class={styles.actions} data-slot="top-bar-actions">
					<For each={topBarActions}>
						{(item): JSX.Element => {
							const Icon = item.icon;

							return (
								<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label} data-slot="top-bar-action" data-action-id={item.id}>
									<Icon size={18} strokeWidth={2} />
								</button>
							);
						}}
					</For>
				</div>

				<NotificationsNav
					isMobileViewport={props.isMobileViewport}
					isMobileWorkspaceOpen={props.isNotificationsOpen}
					onToggleMobileWorkspace={props.onToggleNotifications}
				/>
				<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
				<UserNav
					isMobileViewport={props.isMobileViewport}
					isMobileWorkspaceOpen={props.isProfileOpen}
					onToggleMobileWorkspace={props.onToggleProfile}
				/>
			</div>
		</header>
	);
};
