(window-chrome).tsx

import type { RouteSectionProps } from "@solidjs/router";
import type { UnlistenFn } from "@tauri-apps/api/event";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { type as ostype } from "@tauri-apps/plugin-os";
import { cx } from "cva";
import { onCleanup, onMount, type ParentProps, Suspense } from "solid-js";

import { AbsoluteInsetLoader } from "~/components/Loader";
import CaptionControlsMacOS from "~/components/titlebar/controls/CaptionControlsMacOS";
import CaptionControlsWindows11 from "~/components/titlebar/controls/CaptionControlsWindows11";
import { initializeTitlebar } from "~/utils/titlebar-state";
import {
	useWindowChromeContext,
	WindowChromeContext,
} from "./(window-chrome)/Context";

export default function (props: RouteSectionProps) {
	let unlistenResize: UnlistenFn | undefined;

	onMount(async () => {
		console.log("window chrome mounted");
		void initializeTitlebar().then((unlisten) => {
			unlistenResize = unlisten;
		});
	});

	const handleKeyDown = (e: KeyboardEvent) => {
		const isMac = ostype() === "macos";
		const closeShortcut = isMac
			? e.metaKey && e.key === "w"
			: e.ctrlKey && e.key === "w";

		if (closeShortcut) {
			e.preventDefault();
			getCurrentWindow().close();
		}
	};

	onMount(() => {
		window.addEventListener("keydown", handleKeyDown);
	});

	onCleanup(() => {
		unlistenResize?.();
		window.removeEventListener("keydown", handleKeyDown);
	});

	const isMacOS = ostype() === "macos";

	return (
		<WindowChromeContext>
			<div
				class={cx(
					"flex overflow-hidden flex-col w-screen h-screen max-h-screen divide-y divide-gray-5 bg-gray-1",
					isMacOS && "rounded-[16px]",
				)}
			>
				<Header />

				{/* breaks sometimes */}
				{/* <Transition
        mode="outin"
        enterActiveClass="transition-opacity duration-100"
        exitActiveClass="transition-opacity duration-100"
        enterClass="opacity-0"
        exitToClass="opacity-0"
        > */}
				<Suspense fallback={<AbsoluteInsetLoader />}>
					<Inner>
						<Suspense fallback={null}>{props.children}</Suspense>
					</Inner>
				</Suspense>
				{/* </Transition> */}
			</div>
		</WindowChromeContext>
	);
}

function Header() {
	const ctx = useWindowChromeContext();
	if (!ctx)
		throw new Error(
			"useWindowChrome must be used within a WindowChromeContext",
		);

	const isWindows = ostype() === "windows";
	const isMacOS = ostype() === "macos";

	return (
		<header
			class={cx(
				"flex items-center min-w-0 w-full h-9 select-none shrink-0 bg-gray-2",
				isWindows ? "flex-row" : "flex-row-reverse",
			)}
			data-tauri-drag-region
		>
			{ctx.state()?.items}
			{isWindows && <CaptionControlsWindows11 class="ml-auto!" />}
			{isMacOS && (
				<CaptionControlsMacOS
					class="mr-auto! ml-3"
					showMinimize={false}
					showZoom={false}
				/>
			)}
		</header>
	);
}

function Inner(props: ParentProps) {
	onMount(() => {
		if (location.pathname !== "/") getCurrentWindow().show();
	});

	return (
		<div
			data-tauri-drag-region="none"
			class="flex overflow-y-hidden flex-col flex-1 animate-in fade-in"
		>
			{props.children}
		</div>
	);
}