<script setup lang="ts">

import {reactive} from 'vue'
import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
import ItCheckbox from '@/components/ui/ItCheckbox.vue';


const state = reactive({
  checkboxValue: true,
  dropdownValues: [
    {id: 1, name: 'Wade Cooper'},
    {id: 2, name: 'Arlene Mccoy'},
    {id: 3, name: 'Devon Webb'},
    {id: 4, name: 'Tom Cook'},
    {id: 5, name: 'Tanya Fox'},
    {id: 6, name: 'Hellen Schmidt'},
    {id: 7, name: 'Caroline Schultz'},
    {id: 8, name: 'Mason Heaney'},
    {id: 9, name: 'Claudie Smitham'},
    {id: 10, name: 'Emil Schaefer'},
  ],
  dropdownSelected: {id: 8},
})


const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];

function colorBgClass(color: string, value: number) {
  return `bg-${color}-${value}`;
}

</script>

<template>
  <main class="px-8 py-4">
    <h1>Style Guide</h1>

    <div class="border-b text-gray-700 pb-2 mt-12">
      <h2 class="heading-1">Icons</h2>
    </div>

    <p class="mt-8 text-xl">The icons are defined as Web Components, so they can also be used in the backend. Use them like
      &lt;it-icon-message/&gt; </p>

    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
      <div class="inline-flex flex-col">
        message
        <it-icon-message class="it-icon"/>
      </div>

      <div class="inline-flex flex-col">
        arrow-up
        <it-icon-arrow-up/>
      </div>

      <div class="inline-flex flex-col">
        arrow-down
        <it-icon-arrow-down/>
      </div>

      <div class="inline-flex flex-col">
        arrow-left
        <it-icon-arrow-left/>
      </div>

      <div class="inline-flex flex-col">
        arrow-right
        <it-icon-arrow-right/>
      </div>

      <div class="inline-flex flex-col">
        close
        <it-icon-close/>
      </div>

      <div class="inline-flex flex-col">
        check
        <it-icon-check/>
      </div>

      <div class="inline-flex flex-col">
        info
        <it-icon-info/>
      </div>

      <div class="inline-flex flex-col">
        list
        <it-icon-list/>
      </div>

      <div class="inline-flex flex-col">
        menu
        <it-icon-menu/>
      </div>
    </div>

    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
      <div class="inline-flex flex-col">
        ls-apply
        <it-icon-ls-apply/>
      </div>

      <div class="inline-flex flex-col">
        ls-watch
        <it-icon-ls-watch/>
      </div>

      <div class="inline-flex flex-col">
        ls-test
        <it-icon-ls-test/>
      </div>

      <div class="inline-flex flex-col">
        ls-practice
        <it-icon-ls-practice/>
      </div>

      <div class="inline-flex flex-col">
        ls-network
        <it-icon-ls-network/>
      </div>

      <div class="inline-flex flex-col">
        ls-start
        <it-icon-ls-start/>
      </div>

      <div class="inline-flex flex-col">
        ls-end
        <it-icon-ls-end/>
      </div>
    </div>

    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
      <div class="inline-flex flex-col">
        smiley-happy
        <it-icon-smiley-happy/>
      </div>

      <div class="inline-flex flex-col">
        smiley-thinking
        <it-icon-smiley-thinking/>
      </div>

      <div class="inline-flex flex-col">
        smiley-neutral
        <it-icon-smiley-neutral/>
      </div>
    </div>

    <div class="mt-8 mb-8 flex flex-col gap-4 flex-wrap lg:flex-row">
      <div class="inline-flex flex-col text-orange-500">
        message big
        <it-icon-message class="w-16 h-16 text-orange-500"/>
      </div>

      <div class="inline-flex flex-col text-green-500">
        ls-network big
        <it-icon-ls-network class="w-16 h-16"/>
      </div>

      <div class="inline-flex flex-col text-red-500">
        close small
        <it-icon-close class="w-6 h-6"/>
      </div>

      <div class="inline-flex flex-col text-white bg-blue-900">
        vbv
        <it-icon-vbv class="w-24 h-24"/>
      </div>

      <div class="inline-flex flex-col">
        vbv-pos
        <it-icon-vbv-pos class="w-24 h-24"/>
      </div>


    </div>

    <div class="border-b text-gray-700 pb-2 mt-8">
      <h2 class="heading-1">Colors</h2>
    </div>
    <table class="text-gray-700">
      <tr class="h-12 md:h-18 lg:h-24">
        <td></td>
        <td class="text-center" v-for="value in colorValues">{{value}}</td>
      </tr>
      <tr v-for="color in colors" class="h-12 md:h-18 lg:h-24">
        <td>{{color}}</td>
        <td v-for="value in colorValues" class="px-2">
          <div class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
        </td>
      </tr>
    </table>

    <div class="border-b text-gray-700 pb-2 mt-12">
      <h2 class="heading-1">Typography</h2>
    </div>

    <h1 class="mt-8">Heading 1</h1>
    <h2 class="mt-8">Heading 2</h2>
    <h3 class="mt-8">Heading 3</h3>

    <div class="mt-8 text-xl font-bold">Text Large Bold</div>
    <div class="mt-8 text-xl">Text Large</div>
    <div class="mt-8 link text-xl">Link Large</div>
    <div class="mt-8 font-bold">Text Bold</div>
    <div class="mt-8">Text</div>
    <div class="mt-8 link">Link</div>
    <div class="mt-8 text-sm">Text Small</div>
    <div class="mt-8 link text-sm">Link Small</div>

    <div class="border-b text-gray-700 pb-2 mt-12">
      <h2 class="heading-1">Components</h2>
    </div>

    <h2 class="mt-8 mb-8">Buttons</h2>

    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
      <button class="btn-primary">Primary</button>
      <button class="btn-secondary">Secondary</button>
      <button class="btn-blue">Blue</button>
      <button class="btn-text">Text</button>
      <a class="btn-primary inline-block" href="/">Primary Link</a>
    </div>

    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
      <button disabled class="btn-primary">Primary disabled</button>
      <button disabled class="btn-secondary">Secondary disabled</button>
      <button disabled class="btn-blue">Blue disabled</button>
    </div>

    <div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center lg:justify-start mb-16">
      <button type="button"
              class="btn-primary inline-flex items-center p-3 rounded-full">
        <it-icon-message class="h-5 w-5"></it-icon-message>
      </button>

      <button type="button"
              class="btn-primary inline-flex items-center px-3 py-2">
        <it-icon-message class="-ml-1 mr-3 h-5 w-5"></it-icon-message>
        Button text
      </button>

      <button type="button"
              class="btn-primary inline-flex items-center px-3 py-2">
        Button text
        <it-icon-message class="ml-3 -mr-1 h-5 w-5"></it-icon-message>
      </button>

      <button type="button"
              class="btn-text inline-flex items-center px-3 py-2">
        <it-icon-message class="-ml-1 mr-3 h-5 w-5"></it-icon-message>
        Button text
      </button>

    </div>

    <h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>

    <Listbox as="div" v-model="state.dropdownSelected">
      <div class="mt-1 relative w-128">
        <ListboxButton
          class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold">
          <span class="block truncate">{{ state.dropdownSelected.name }}</span>
          <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
          <it-icon-arrow-down class="h-5 w-5" aria-hidden="true"/>
        </span>
        </ListboxButton>

        <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
                    leave-to-class="opacity-0">
          <ListboxOptions
            class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
            <ListboxOption as="template" v-for="person in state.dropdownValues" :key="person.id" :value="person"
                           v-slot="{ active, selected }">
              <li
                :class="[active ? 'text-white bg-blue-900' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
              <span :class="[state.dropdownSelected ? 'font-semibold' : 'font-normal', 'block truncate']">
                {{ person.name }}
              </span>

                <span v-if="state.dropdownSelected"
                      :class="[active ? 'text-white' : 'text-blue-900', 'absolute inset-y-0 right-0 flex items-center pr-4']">
                <it-icon-check class="h-5 w-5" aria-hidden="true"/>
              </span>
              </li>
            </ListboxOption>
          </ListboxOptions>
        </transition>
      </div>
    </Listbox>

    <h2 class="mt-8 mb-8">Checkbox</h2>

    <ItCheckbox :disabled="false" class="" v-model="state.checkboxValue">Label</ItCheckbox>

    <ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>

  </main>
</template>

<style scoped>
</style>
