---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
import FormGroup from '@ui/FormGroup.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import Avatar from '@ui/Avatar.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import site from '@data/site.json'
import DocsLink from '@ui/DocsLink.astro'

type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }]

const colors = Object.entries(site.colors) as ColorEntry[]
const lightColors = Object.entries(site.lightColors) as ColorEntry[]
const grayColors = Object.entries(site.grayColors) as ColorEntry[]
const socialColors = Object.entries(site.socialColors) as ColorEntry[]

const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent']
---

<DefaultLayout title="Colors" pageMenu="base.colors" description="The full color palette, with hex values, and a gradient builder.">
  <DocsLink slot="page-header-actions" path="/ui/base/colors" />

  <div class="row row-cards">
    <div class="col-6 col-lg-3">
      <Card>
        <CardBody>
          <CardTitle>Colors</CardTitle>
          <CardSubtitle>The extended color palette, with hex values.</CardSubtitle>
          <div class="row g-3">
            {
              colors.map(([name, color]) => (
                <div class="col-12">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <Avatar shape="square" class={`bg-${name} text-${name}-fg`} placeholder={color.abbr} />
                    </div>
                    <div class="col">
                      {color.title}
                      <br />
                      <code>{color.hex}</code>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-6 col-lg-3">
      <Card>
        <CardBody>
          <CardTitle>Light colors</CardTitle>
          <CardSubtitle>A tinted, low-contrast version of each color.</CardSubtitle>
          <div class="row g-3">
            {
              lightColors.map(([name, color]) => (
                <div class="col-12">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <Avatar shape="square" class={`bg-${name}-lt`} placeholder={color.abbr} />
                    </div>
                    <div class="col">
                      {color.title}
                      <br />
                      <code>{color.hex}</code>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-6 col-lg-3">
      <Card>
        <CardBody>
          <CardTitle>Gray colors</CardTitle>
          <CardSubtitle>The neutral gray scale used for text, borders, and backgrounds.</CardSubtitle>
          <div class="row g-3">
            {
              grayColors.map(([name, color]) => (
                <div class="col-12">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <Avatar shape="square" class={`bg-${name} text-${name}-fg`} placeholder={color.abbr} />
                    </div>
                    <div class="col">
                      {color.title}
                      <br />
                      <code>{color.hex}</code>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-6 col-lg-3">
      <Card>
        <CardBody>
          <CardTitle>Social colors</CardTitle>
          <CardSubtitle>Brand colors for social networks.</CardSubtitle>
          <div class="row g-3">
            {
              socialColors.map(([name, color]) => (
                <div class="col-12">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <Avatar shape="square" class={`bg-${name} text-${name}-fg`} icon={color.icon} />
                    </div>
                    <div class="col">
                      {color.title}
                      <br />
                      <code>{color.hex}</code>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <div class="row">
        <div class="col-12 col-lg-6">
          <Card>
            <CardBody>
              <CardTitle>Gradient</CardTitle>
              <CardSubtitle>Build a gradient from any two colors and preview it live.</CardSubtitle>
              <form>
                <div class="row g-4">
                  <div class="col">
                    <FormGroup label="From" for="colors-gradient-from" class="">
                      <select class="form-select" name="color-from" id="colors-gradient-from">
                        {gradientColors.map((color) => <option value={color}>{color}</option>)}
                      </select>
                    </FormGroup>
                    <FormGroup label="To" for="colors-gradient-to" class="mt-3">
                      <select class="form-select" name="color-to" id="colors-gradient-to">
                        {
                          gradientColors.map((color) => (
                            <option value={color} selected={color === 'transparent'}>
                              {color}
                            </option>
                          ))
                        }
                      </select>
                    </FormGroup>
                  </div>
                  <div class="col">
                    <FormGroup label="Via" for="colors-gradient-via" class="">
                      <select class="form-select" name="color-via" id="colors-gradient-via">
                        <option></option>
                        {gradientColors.map((color) => <option value={color}>{color}</option>)}
                      </select>
                    </FormGroup>
                    <FormGroup label="Direction" for="colors-gradient-direction" class="mt-3">
                      <select class="form-select" name="color-direction" id="colors-gradient-direction">
                        <option value="to-t">to top</option>
                        <option value="to-te">to top right</option>
                        <option value="to-r" selected>to right</option>
                        <option value="to-be">to bottom right</option>
                        <option value="to-b">to bottom</option>
                        <option value="to-bs">to bottom left</option>
                        <option value="to-s">to left</option>
                        <option value="to-ts">to top left</option>
                      </select>
                    </FormGroup>
                  </div>
                  <div class="col-12">
                    <div class="border rounded bg-pattern-transparent overflow-hidden">
                      <div id="gradient-preview" class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent">
                        <div class="px-4 py-5"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </CardBody>
          </Card>
        </div>
        <div class="col-12 col-lg-6">
          <Card>
            <CardBody>
              <CardTitle>Gradient colors</CardTitle>
              <CardSubtitle>Every color faded to transparent, fading in from the left or the right.</CardSubtitle>
              <div class="row">
                <div class="col">
                  <div class="space-y">
                    {gradientColors.map((color) => <div class={`border rounded bg-gradient bg-gradient-from-${color} bg-gradient-to-transparent px-4 py-2`} />)}
                  </div>
                </div>
                <div class="col">
                  <div class="space-y">
                    {gradientColors.map((color) => <div class={`border rounded bg-gradient bg-gradient-to-${color} bg-gradient-from-transparent px-4 py-2`} />)}
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  </div>

  <CaptureScript>
    <!-- BEGIN GRADIENT SCRIPT -->
    <script is:inline>
      document.addEventListener('DOMContentLoaded', function () {
        var gradientPreview = document.getElementById('gradient-preview')
        var colorFrom = document.querySelector('[name="color-from"]')
        var colorTo = document.querySelector('[name="color-to"]')
        var colorVia = document.querySelector('[name="color-via"]')
        var colorDirection = document.querySelector('[name="color-direction"]')

        function updateGradient() {
          var from = colorFrom.value
          var to = colorTo.value
          var via = colorVia.value
          var direction = colorDirection.value

          var gradient = 'bg-gradient bg-gradient-from-' + from + ' bg-gradient-to-' + to

          if (via) {
            gradient += ' bg-gradient-via-' + via
          }

          gradient += ' bg-gradient-' + direction

          gradientPreview.className = gradient
        }

        colorFrom.addEventListener('change', updateGradient)
        colorTo.addEventListener('change', updateGradient)
        colorVia.addEventListener('change', updateGradient)
        colorDirection.addEventListener('change', updateGradient)

        updateGradient()
      })
    </script>
    <!-- END GRADIENT SCRIPT -->
  </CaptureScript>
</DefaultLayout>