---
import Layout from '../layouts/Layout.astro';
import Toggle from '../components/Toggle/toggle.astro';
import {
  Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
  CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
  LinkIcon, MinusIcon, MoreIcon, OverviewIcon, PlusIcon, ProfileIcon,
  SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
  UploadIcon,
} from '../components/Icons/index.ts';
import Notification from '../components/Notifications/notification.astro';

const initialChecked = true;
---

<Layout>
  <main>
    <h1>Nova Design System</h1>
    <section>
      <h2>Toggle</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Toggle data-checked={initialChecked} data-name="notifications" id="my-toggle" />
        <p id="toggle-state">State: {initialChecked ? 'Checked' : 'Unchecked'}</p>
      </div>
    </section>
    <section>
      <h2>Notifications — Error / Warning / Success / Info</h2>
      <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Notification type="error">
            An error occurred during the operation. Please try again.
        </Notification>
        <Notification type="success">
            The operation was completed successfully.
        </Notification>
        <Notification type="warning">
            A warning occurred during the operation. Please check the details.
        </Notification>
        <Notification type="info">
            Information about the operation.
        </Notification>
      </div>
    </section>
    <section>
      <h2>Icon — 16 / 24 / 32</h2>
      <div class="icon-grid">
        <div class="icon-row">
          <Arrow2Icon size={16} orientation="up" />
          <Arrow2Icon size={16} orientation="right" />
          <Arrow2Icon size={16} orientation="down" />
          <Arrow2Icon size={16} orientation="left" />
        </div>
        <div class="icon-row">
          <Arrow2Icon size={24} orientation="up" />
          <Arrow2Icon size={24} orientation="right" />
          <Arrow2Icon size={24} orientation="down" />
          <Arrow2Icon size={24} orientation="left" />
        </div>
        <div class="icon-row">
          <Arrow2Icon size={32} orientation="up" />
          <Arrow2Icon size={32} orientation="right" />
          <Arrow2Icon size={32} orientation="down" />
          <Arrow2Icon size={32} orientation="left" />
        </div>
        <div class="icon-row">
          <ProfileIcon size={16} />
          <ProfileIcon size={24} />
          <ProfileIcon size={32} />
        </div>
        <div class="icon-row">
          <ShareIcon size={16} />
          <ShareIcon size={24} />
          <ShareIcon size={32} />
        </div>
        <div class="icon-row">
          <SearchIcon size={16} />
          <SearchIcon size={24} />
          <SearchIcon size={32} />
        </div>
        <div class="icon-row">
          <CloseIcon size={16} />
          <CloseIcon size={24} />
          <CloseIcon size={32} />
        </div>
        <div class="icon-row">
          <UploadIcon size={16} />
          <UploadIcon size={24} />
          <UploadIcon size={32} />
        </div>
        <div class="icon-row">
          <BinIcon size={16} />
          <BinIcon size={24} />
          <BinIcon size={32} />
        </div>
        <div class="icon-row">
          <BurgerIcon size={16} />
          <BurgerIcon size={24} />
          <BurgerIcon size={32} />
        </div>
        <div class="icon-row">
          <CalendarIcon size={16} />
          <CalendarIcon size={24} />
          <CalendarIcon size={32} />
        </div>
        <div class="icon-row">
          <CheckIcon size={16} />
          <CheckIcon size={24} />
          <CheckIcon size={32} />
        </div>
        <div class="icon-row">
          <CodeIcon size={16} />
          <CodeIcon size={24} />
          <CodeIcon size={32} />
        </div>
        <div class="icon-row">
          <CubeIcon size={16} />
          <CubeIcon size={24} />
          <CubeIcon size={32} />
        </div>
        <div class="icon-row">
          <DownloadIcon size={16} />
          <DownloadIcon size={24} />
          <DownloadIcon size={32} />
        </div>
        <div class="icon-row">
          <FilterIcon size={16} />
          <FilterIcon size={24} />
          <FilterIcon size={32} />
        </div>
        <div class="icon-row">
          <HelpIcon size={16} />
          <HelpIcon size={24} />
          <HelpIcon size={32} />
        </div>
        <div class="icon-row">
          <HomeIcon size={16} />
          <HomeIcon size={24} />
          <HomeIcon size={32} />
        </div>
        <div class="icon-row">
          <LinkIcon size={16} />
          <LinkIcon size={24} />
          <LinkIcon size={32} />
        </div>
        <div class="icon-row">
          <MinusIcon size={16} />
          <MinusIcon size={24} />
          <MinusIcon size={32} />
        </div>
        <div class="icon-row">
          <MoreIcon size={16} />
          <MoreIcon size={24} />
          <MoreIcon size={32} />
        </div>
        <div class="icon-row">
          <OverviewIcon size={16} />
          <OverviewIcon size={24} />
          <OverviewIcon size={32} />
        </div>
        <div class="icon-row">
          <PlusIcon size={16} />
          <PlusIcon size={24} />
          <PlusIcon size={32} />
        </div>
        <div class="icon-row">
          <SettingsIcon size={16} />
          <SettingsIcon size={24} />
          <SettingsIcon size={32} />
        </div>
        <div class="icon-row">
          <ShieldIcon size={16} />
          <ShieldIcon size={24} />
          <ShieldIcon size={32} />
        </div>
        <div class="icon-row">
          <SortIcon size={16} variant="default" />
          <SortIcon size={16} variant="ascend" />
          <SortIcon size={16} variant="descend" />
          <SortIcon size={24} variant="default" />
          <SortIcon size={24} variant="ascend" />
          <SortIcon size={24} variant="descend" />
          <SortIcon size={32} variant="default" />
          <SortIcon size={32} variant="ascend" />
          <SortIcon size={32} variant="descend" />
        </div>
        <div class="icon-row">
          <StatsIcon size={16} />
          <StatsIcon size={24} />
          <StatsIcon size={32} />
        </div>
      </div>
    </section>
  </main>
</Layout>

<script>
    const toggle = document.getElementById('my-toggle') as any;
    const stateLabel = document.getElementById('toggle-state');

    // Défaut: thème sombre
    if (!document.documentElement.hasAttribute('data-theme')) {
      document.documentElement.setAttribute('data-theme', 'dark');
    }
    if (stateLabel) stateLabel.textContent = 'Thème : Sombre';

    toggle?.addEventListener('change', (e: CustomEvent) => {
      const { checked } = e.detail;

      if (checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
      } else {
        document.documentElement.setAttribute('data-theme', 'light');
        if (stateLabel) stateLabel.textContent = 'Thème : Clair';
      }
    });
</script>

<style lang="scss" scoped>

  body {
    background-color: var(--nds-background);
    color: var(--nds-text);
  }
  
  main {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
  }

  h1 {
    font-size: var(--nds-type-h1-size);
    font-weight: var(--nds-type-h1-weight);
    line-height: var(--nds-type-h1-line-height);
    letter-spacing: var(--nds-type-h1-letter-spacing);
    margin-bottom: var(--nds-spacing-xl);
  }

  h2 {
    font-size: var(--nds-type-h2-size);
    font-weight: var(--nds-type-h2-weight);
    line-height: var(--nds-type-h2-line-height);
    letter-spacing: var(--nds-type-h2-letter-spacing);
    color: var(--nds-text-muted);
    margin-bottom: var(--nds-spacing-md);
  }

  section {
    margin-bottom: var(--nds-spacing-2xl);
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nds-spacing-sm);
  }

  .icon-grid {
    display: flex;
    flex-direction: column;
    gap: var(--nds-spacing-xs);
  }

  .icon-row {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-lg);
    color: var(--nds-text);
  }

  .icon-name {
    font-size: var(--nds-type-body-small-size);
    color: var(--nds-text-muted);
    width: 100px;
    flex-shrink: 0;
  }

  .icon-sizes {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-md);
    color: var(--nds-default);
  }
</style>