---
import Layout from '../layouts/Layout.astro';
import Notification from '../components/Notifications/notification.astro';
import Toggle from '../components/Toggle/toggle.astro';
import Tab from '../components/Tabs/tab.astro';
import TabItem from '../components/Tabs/tabItem.astro';
import TabContent from '../components/Tabs/tabContent.astro';
import Button from '../components/Button/button.astro';
import Link from '../components/Link/link.astro';
import ListItem from '../components/ListItem/listItem.astro';
import ListItemTitle from '../components/ListItem/listItemTitle.astro';
import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
import LoadingBar from '../components/LoadingBar/loadingBar.astro';
import NumericStepper from '../components/numericStepper/numericStepper.astro';
import Avatar from '../components/Avatar/avatar.astro';
import Select from '../components/Select/select.astro';
import SelectOption from '../components/Select/selectOption.astro';
import TextField from '../components/textField/textField.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';

const initialChecked = true;
---

<Layout>
  <main>
    <h1>Nova Design System</h1>
    <section>
      <h2>TextField</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <TextField label="Email" type="email" placeholder="Enter your email" />
        <TextField label="Password" type="password" placeholder="Enter your password" />
        <TextField label="Textarea" type="textarea" placeholder="Enter your message" max={100} />
      </div>
    </section>
    <section>
      <h2>Select</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Select default="option3">
          <SelectOption value="option1">Option 1</SelectOption>
          <SelectOption value="option2">Option 2</SelectOption>
          <SelectOption value="option3" >Option 3</SelectOption>
          <SelectOption value="option4" >Option 4</SelectOption>
          <SelectOption value="option5" >Option 5</SelectOption>
          <SelectOption value="option6" >Option 6</SelectOption>
          <SelectOption value="option7" >Option 7</SelectOption>
          <SelectOption value="option8" >Option 8</SelectOption>
          <SelectOption value="option9" disabled>Option 9</SelectOption>
        </Select>
        <Select disabled>
          <SelectOption value="option1">Option 1</SelectOption>
        </Select>
      </div>
    </section>
    <section>
      <h2>Avatar</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Avatar image="https://static.vecteezy.com/system/resources/thumbnails/057/068/323/small/single-fresh-red-strawberry-on-table-green-background-food-fruit-sweet-macro-juicy-plant-image-photo.jpg" name="John Doe" type="photo"/>
        <Avatar name="Jane Smith" type="initials"/>
      </div>
    </section>
    <section>
      <h2>Numeric Stepper</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <NumericStepper min={-15} max={10} value={5} step={5} id="my-numeric-stepper"/>
      </div>
    </section>
    <section>
      <h2>Loading Bar</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <LoadingBar type="known" percentage={75} width="500px" />
        <LoadingBar type="unknown" width="500px" />
      </div>
      </div>
    </section>
    <section>
      <h2>List Item</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <ListItem>
          <ListItemTitle>List Item Title</ListItemTitle>
          <ListItemSubtitle>List Item Subtitle</ListItemSubtitle>
        </ListItem>
      </div>
    </section>
    <section>
      <h2>Link</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Link url="https://example.com">Example Link</Link>
        <Link url="https://example.com" blank={true}>Example Link (opens in new tab)</Link>
      </div>
    </section>
    <section>
      <h2>Button</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Button type="primary">Primary Button</Button>
        <Button type="secondary">Secondary Button</Button>
        <Button type="primary" disabled>disabled</Button>
      </div>
    </section>
    <section>
      <h2>Tabs</h2>
      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
        <Tab id="my-tab" defaultActive="images">
          <TabItem id="images">images</TabItem>
          <TabItem id="videos">Videos</TabItem>
          <TabItem id="docs">Documents</TabItem>
        </Tab>
        <TabContent id="my-tab" itemId="images">
          <p>my images</p>
        </TabContent>

        <TabContent id="my-tab" itemId="videos">
          <p>Video player here</p>
        </TabContent>

        <TabContent id="my-tab" itemId="docs">
          <p>Document list here</p>
        </TabContent>
      </div>
    </section>
    <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>