<script setup lang="ts">
import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
import ItDropdown from "@/components/ui/ItDropdown.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import ItNavigationProgress from "@/components/ui/ItNavigationProgress.vue";
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
import ItTextarea from "@/components/ui/ItTextarea.vue";
import ItToggleSwitch from "@/components/ui/ItToggleSwitch.vue";
import RatingScale from "@/components/ui/RatingScale.vue";
import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
import logger from "loglevel";
import { reactive, ref } from "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: -1,
    name: "Select a name",
  },
});

const dropdownData = [
  {
    title: "Option 1",
    icon: "it-icon-logout",
    data: {},
  },
  {
    title: "Option 2",
    icon: "it-icon-logout",
    data: {
      test: 12,
    },
  },
  {
    title: "Option 3",
    icon: "it-icon-settings",
    data: {
      amount: 34,
    },
  },
];

// TODO: die CSS-Klasse für die Farben wird hier in der StyleGuideView.vue generiert.
// deshalb muss man diese CSS-Klassen in tailwind.config.js "safelist"en, wenn diese sonst
// noch nirgendwo verwendet werden.
const colors = [
  "blue",
  "sky",
  "green",
  "red",
  "orange",
  "yellow",
  "stone",
  "gray",
  "slate",
];
const colorValues = [200, 300, 400, 500, 600, 700, 800, 900];

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

const satisfactionValues = [
  { name: "Sehr unzufrieden", active: false, value: 1 },
  { name: "unzufrieden", active: true, value: 2 },
  { name: "zufrieden", active: false, value: 3 },
  { name: "Sehr zufrieden", active: false, value: 4 },
];
const satisfaction = ref(satisfactionValues[1].value);
const satisfactionText =
  'Wie zufrieden bist du mit dem Kurs "Überbetriebliche Kurse" allgemein?';

const textValue = ref("abc");

const barChartItems = [
  "Internet",
  "Internet",
  "Internet",
  "Internet",
  "Internet",
  "Internet",
  "TV",
  "TV",
  "TV",
  "Anderes",
];

function log(data: any) {
  logger.info(data);
}
</script>

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

    <div class="mt-12 border-b pb-2 text-gray-700">
      <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="mb-8 mt-8 flex flex-col flex-wrap gap-4 lg:flex-row">
      <div class="inline-flex flex-col">
        message
        <it-icon-message class="it-icon" />
      </div>

      <div class="inline-flex flex-col">
        notification
        <it-icon-notification 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 class="inline-flex flex-col">
        settings
        <it-icon-settings />
      </div>
    </div>

    <div class="mb-8 mt-8 flex flex-col flex-wrap gap-4 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 class="inline-flex flex-col">
        calendar
        <it-icon-calendar />
      </div>
      <div class="inline-flex flex-col">
        calendar-light
        <it-icon-calenda-light />
      </div>
    </div>

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

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

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

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

      <div class="inline-flex flex-col">
        lc-media-library
        <it-icon-lc-media-library />
      </div>

      <div class="inline-flex flex-col">
        lc-online-training
        <it-icon-lc-online-training />
      </div>

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

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

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

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

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

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

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

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

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

    <div class="mt-12 border-b pb-2 text-gray-700">
      <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="link mt-8 text-xl">Link Large</div>
    <div class="mt-8 font-bold">Text Bold</div>
    <div class="mt-8">Text</div>
    <div class="link mt-8">Link</div>
    <div class="mt-8 text-sm">Text Small</div>
    <div class="link mt-8 text-sm">Link Small</div>

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

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

    <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
      <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="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
      <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="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row lg:justify-start"
    >
      <button
        type="button"
        class="btn-primary inline-flex items-center rounded-full p-3"
      >
        <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="-mr-1 ml-3 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="mb-8 mt-8">Dropdown (Work-in-progress)</h2>

    <ItDropdownSelect
      v-model="state.dropdownSelected"
      class="mt-4 w-full lg:mt-0 lg:w-96"
      :items="state.dropdownValues"
    ></ItDropdownSelect>
    {{ state.dropdownSelected }}

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

    <ItCheckbox
      :checkbox-item="{
        subtitle: 'Subtitle',
        label: 'Label',
        value: 'value',
        checked: false,
      }"
      @toggle="state.checkboxValue = !state.checkboxValue"
    >
      Label
    </ItCheckbox>

    <br />

    <ItCheckbox
      :disabled="true"
      :checkbox-item="{
        subtitle: 'checked disabled',
        label: 'Label',
        value: 'value',
        checked: true,
      }"
      class="mt-6"
    >
      Disabled
    </ItCheckbox>

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

    <ItCheckboxGroup
      label="Label"
      :items="[
        {
          value: 'checkbox1',
          label: 'Label 1',
          subtitle: 'Subtitle 1',
          checked: false,
        },
        {
          value: 'checkbox2',
          label: 'Label 2',
          subtitle: 'Subtitle 2',
          checked: false,
        },
        {
          value: 'checkbox3',
          label: 'Label 3',
          checked: false,
        },
      ]"
    />

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

    <div class="h-60">
      <ItDropdown
        :button-classes="['btn-primary']"
        :list-items="dropdownData"
        :align="'left'"
        @select="log"
      >
        Click Me
      </ItDropdown>
    </div>
    <ItTextarea v-model="textValue" label="Hallo Velo" class="mb-8" />

    <ItRadioGroup
      v-model="satisfaction"
      :label="satisfactionText"
      :items="satisfactionValues"
    />
    <div>
      <RatingScale
        :ratings="[3, 4, 3, 4]"
        :answers="19"
        title="Frage 3"
        text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
      />
      <VerticalBarChart
        title="Frage X"
        text="Fragentext"
        :ratings="[true, true, false, true, true, false, true, false]"
      />
      <HorizontalBarChart title="Frage X" text="Fragentext" :items="barChartItems" />
    </div>

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

    <LearningPathCircle
      class="h-48 w-48"
      :sectors="[
        {
          progress: 'finished',
        },
        {
          progress: 'finished',
        },
        {
          progress: 'in_progress',
        },
        {
          progress: 'none',
        },
      ]"
    ></LearningPathCircle>

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

    <ItToggleSwitch></ItToggleSwitch>

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

    <ItNavigationProgress
      :steps="4"
      :current-step="1"
      start-badge-text="Einleitung"
      end-badge-text="Abgabe"
    />
  </main>
</template>

<style scoped></style>
