import { createUniqueId, Show, type JSX } from "solid-js";
import { NotificationsButton } from "./NotificationsButton";
import { NotificationsMenu } from "./NotificationsMenu";
import { createDesktopMenuController } from "./createDesktopMenuController";
import styles from "./NotificationsNav.module.scss";

type NotificationsNavProps = {
	isMobileViewport: boolean;
	isMobileWorkspaceOpen: boolean;
	onToggleMobileWorkspace: VoidFunction;
};

export const NotificationsNav = (props: NotificationsNavProps): JSX.Element => {
	const menuId = createUniqueId();

	return (
		<Show
			when={props.isMobileViewport}
			fallback={<DesktopNotificationsNav />}
		>
			<div class={styles.root}>
				<NotificationsButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
			</div>
		</Show>
	);
};

const DesktopNotificationsNav = (): JSX.Element => {
	const controller = createDesktopMenuController();
	const menuId = createUniqueId();

	return (
		<div class={styles.root} ref={controller.setRootRef}>
			<NotificationsButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
			{controller.isOpen() ? <NotificationsMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
		</div>
	);
};