import { Icon } from '@iconify-icon/solid';
import { A } from '@solidjs/router';
import { Component, ParentComponent } from 'solid-js';
import { Portal } from 'solid-js/web';

const WindowDragHandle: Component = () => {
  return (
    <Portal>
      <div class="fixed inset-x-0 top-0 h-8 z-10" data-tauri-drag-region />
    </Portal>
  );
};

interface NavigationLinkProps {
  href: string;
}

const NavigateLink: ParentComponent<NavigationLinkProps> = (props) => {
  return (
    <A
      href={props.href}
      class="hover:text-primary-hover"
      activeClass="text-primary-active"
      inactiveClass="text-on-surface">
      <div class="flex flex-col justify-center items-center gap-2">{props.children}</div>
    </A>
  );
};

const Layout: ParentComponent = (props) => {
  return (
    <main class="flex flex-col items-stretch gap-0 size-full">
      <header class="h-8 flex flex-row items-center pl-18 py-4">
        <span class="z-20 text-title-lg italic">ComfyUI Resources</span>
        <div class="grow" />
      </header>
      <div class="flex flex-row items-stretch gap-0 grow overflow-hidden">
        <nav class="flex flex-col items-center gap-6 overflow-hidden w-24 py-4">
          <NavigateLink href="/">
            <Icon icon="tabler:folder" class="text-[28px] stroke-1" />
            <span class="text-body-sm">Models</span>
          </NavigateLink>
          <NavigateLink href="/browse">
            <Icon icon="tabler:world" class="text-[28px] stroke-1" />
            <span class="text-body-sm">Browse</span>
          </NavigateLink>
          <NavigateLink href="/download">
            <Icon icon="tabler:download" class="text-[28px] stroke-1" />
            <span class="text-body-sm">Download</span>
          </NavigateLink>
          <NavigateLink href="/prompt">
            <Icon icon="tabler:input-ai" class="text-[28px] stroke-1" />
            <span class="text-body-sm">Prompt</span>
          </NavigateLink>
          <NavigateLink href="/setting">
            <Icon icon="tabler:settings" class="text-[28px] stroke-1" />
            <span class="text-body-sm">Settings</span>
          </NavigateLink>
        </nav>
        <div class="grow overflow-hidden">{props.children}</div>
      </div>
      <WindowDragHandle />
    </main>
  );
};

export default Layout;
