<script lang="ts">
  import '$lib/app.css';
  import {
    Details,
    InputCheckbox,
    InputColor,
    InputNumber,
    InputSelect,
    InputShape,
    InputVec3,
    ShortCut
  } from '$lib';
  import Section from './Section.svelte';
  import Theme from './Theme.svelte';
  import ThemeSelector from './ThemeSelector.svelte';

  let intValue = $state(0);
  let floatValue = $state(0.2);
  let float3Value = $state(1);
  let vecValue = $state([0.2, 0.3, 0.4]);
  const options = ['strawberry', 'raspberry', 'chickpeas'];
  let selectValue = $state(0);
  const d = $derived(options[selectValue]);
  let checked = $state(false);
  let colorValue = $state<[number, number, number]>([59, 130, 246]);
  let mirrorShape = $state(true);
  let detailsOpen = $state(false);

  let points = $state([]);
  let theme = $state('dark');
</script>

<main class="flex flex-col gap-8 py-8">
  <div class="flex gap-4">
    <h1 class="text-4xl">@nodarium/ui</h1>
    <ThemeSelector bind:theme />
  </div>

  <Section title="InputNumber">
    <Theme />
  </Section>

  <Section title="InputNumber">
    <div class="flex flex-col gap-2">
      <p>value={floatValue}</p>
      <InputNumber bind:value={floatValue} />
      <p>min=0 max=10 step=1 value={intValue}</p>
      <InputNumber bind:value={intValue} min={0} max={10} step={1} />
      <p>min=0 max=3 step=0.01 value={float3Value}</p>
      <InputNumber bind:value={float3Value} step={0.01} max={3} />
    </div>
  </Section>

  <Section title="Vec3" value={JSON.stringify(vecValue)}>
    <InputVec3 bind:value={vecValue} />
  </Section>

  <Section title="Select" value={d}>
    <InputSelect bind:value={selectValue} {options} />
  </Section>

  <Section title="Checkbox" value={checked}>
    <InputCheckbox bind:value={checked} />
  </Section>

  <Section title="Color" value={colorValue}>
    <InputColor bind:value={colorValue} />
  </Section>

  <Section title="Shape">
    {#snippet header()}
      <label class="flex gap-2">
        <InputCheckbox bind:value={mirrorShape} />
        <p>mirror</p>
      </label>
      <p class="max-w-full overflow-hidden">{JSON.stringify(points)}</p>
    {/snippet}
    <div style:width="300px">
      <InputShape bind:value={points} mirror={mirrorShape} />
    </div>
  </Section>

  <Section title="Details" value={detailsOpen}>
    <Details title="More Information" bind:open={detailsOpen}>
      <p>Here is some more information that was previously hidden.</p>
    </Details>
  </Section>

  <Section title="Shortcut">
    <div class="flex gap-4">
      <ShortCut ctrl key="S" />
      <ShortCut alt key="F4" />
      <ShortCut alt ctrl key="delete" />
    </div>
  </Section>
</main>

<style>
  main {
    max-width: 800px;
    margin: 0 auto;
  }
</style>
