import type { Component } from 'solid-js';
import type { RouteSectionProps } from '@solidjs/router';
import { createSignal } from 'solid-js';
import {
  SSButton,
  SSCallout,
  SSDropdown,
  SSShell,
} from 'src';
import {
  IconBell,
  IconChart,
  IconDots,
  IconLink,
  IconSettings,
  IconShield,
  IconSpark,
  IconBolt,
  IconCheck,
} from '../../demo/content';

const ShellLayout: Component<RouteSectionProps> = (props) => {
  const [notice, setNotice] = createSignal(false);

  return (
    <SSShell
      title="Sortsys UI"
      actions={
        <div class="demo_inline">
          <SSButton isIconOnly ariaLabel="Notifications">
            <IconBell />
          </SSButton>
          <SSButton class="secondary">Export</SSButton>
          <SSDropdown
            icon={<IconDots />}
            items={[
              { label: 'Settings', icon: <IconSettings /> },
              { label: 'Share', icon: <IconLink /> },
            ]}
          />
        </div>
      }
      nav={
        <SSShell.Nav>
          <SSShell.NavLink href="/" icon={<IconSpark />}>Overview</SSShell.NavLink>
          <SSShell.NavLink href="/forms" icon={<IconBolt />}>Forms</SSShell.NavLink>
          <SSShell.NavLink href="/data" icon={<IconChart />}>Data</SSShell.NavLink>
          <SSShell.NavLink href="/modals" icon={<IconShield />}>Modals</SSShell.NavLink>
          <SSShell.NavGroup title="Layout" icon={<IconSettings />} initiallyExpanded>
            <SSShell.NavLink href="/layout" icon={<IconLink />}>Surfaces & tiles</SSShell.NavLink>
          </SSShell.NavGroup>
          <SSShell.NavAction onclick={() => setNotice(true)} icon={<IconBell />}>
            Ping team
          </SSShell.NavAction>
        </SSShell.Nav>
      }
    >
      {notice() && (
        <div class="demo_notice">
          <SSCallout color="green" icon={<IconCheck />}>
            Team notified. The update will appear in the activity feed.
          </SSCallout>
          <SSButton class="tertiary" onclick={() => setNotice(false)}>
            Clear
          </SSButton>
        </div>
      )}
      {props.children}
    </SSShell>
  );
};

export default ShellLayout;