<template>
  <div
    ref="root"
    class="root"
  >
    <!-- UiButton -->
    <div class="doc-block">
      <strong>UiButton</strong>
      <h1>Кнопки и ссылки</h1>

      <div style="display: flex; flex-direction: column; gap: 16px">
        <template
          v-for="type in ['filled', 'outlined', 'ghost', 'link']"
          :key="type"
        >
          <div
            v-for="color in ['primary', 'secondary']"
            :key="color"
            class="buttons-rows"
          >
            <div
              v-for="size in ['large', 'medium', 'small']"
              :key="size"
              class="buttons-grid"
            >
              <template
                v-for="(props, index) in [
                  {
                    bind: { type, size, color },
                    icon: size === 'large' ? 'plus' : 's-plus',
                    chevron:
                      size === 'large' ? 'chevron-down' : 's-chevron-down',
                  },
                ]"
                :key="index"
              >
                <UiButton v-bind="props.bind">
                  Button
                </UiButton>

                <UiButton
                  v-bind="props.bind"
                  :icon="props.icon"
                >
                  Button
                </UiButton>
                <UiButton
                  v-bind="props.bind"
                  :right-icon="props.icon"
                >
                  Button
                </UiButton>
                <UiButton
                  v-bind="props.bind"
                  :left-icon="props.icon"
                  :right-icon="props.chevron"
                >
                  Button
                </UiButton>

                <UiButton
                  v-bind="props.bind"
                  loading
                >
                  Button
                </UiButton>
                <UiButton
                  v-bind="props.bind"
                  :icon="props.icon"
                />
                <UiButton
                  v-bind="props.bind"
                  :left-icon="props.icon"
                  :right-icon="props.chevron"
                />

                <UiButton
                  v-bind="props.bind"
                  :icon="props.icon"
                  loading
                />
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- UiSelect -->
    <div class="doc-block">
      <strong>UiSelect</strong>
      <h1>Select</h1>

      <div class="two-columns">
        <h4 class="group-heading">
          Default
        </h4>
        <h4 class="group-heading">
          Multiple
        </h4>

        <div
          v-for="(multiple, index) in [false, true]"
          :key="index"
          class="bg-clr-grey-100 p-8"
          style="display: inline-flex; gap: 8px; justify-self: center"
        >
          <UiSelect
            :id="!multiple ? 'select' : 'select2'"
            label="Select"
            :options="selectOptions"
            :multiple="multiple"
          />
          <UiSelect
            :id="!multiple ? 'select' : 'select2'"
            label="Searchable"
            :options="selectOptions"
            searchable
            :multiple="multiple"
          />
          <UiSelect
            :id="!multiple ? 'select' : 'select2'"
            label="Clearable"
            :options="selectOptions"
            clearable
            :multiple="multiple"
          />
        </div>
      </div>
    </div>

    <!-- UiDropdown -->
    <div class="doc-block half">
      <strong>UiDropdown</strong>
      <h1>Dropdown \ Выпадающий список</h1>

      <UiDropdown>
        <UiButton
          right-icon="s-chevron-down"
          size="small"
        >
          Trigger
        </UiButton>

        <template #dropdown>
          <UiDropdownItem
            v-for="i in 5"
            :key="i"
          >
            Item {{ i }}
          </UiDropdownItem>
        </template>
      </UiDropdown>
    </div>

    <!-- UiCalendar -->
    <div class="doc-block half">
      <strong>UiCalendar</strong>
      <h1>Calendar</h1>

      <div class="d-inline-block bg-clr-grey-100 p-8">
        <UiCalendar style="border-radius: 12px" />
      </div>
    </div>

    <!-- UiInput -->
    <div class="doc-block half">
      <strong>UiInput</strong>
      <h1>Поля ввода</h1>

      <div class="two-columns">
        <!--        <template v-for="state in []"></template> -->
        <h4 class="group-heading">
          Normal
        </h4>
        <h4 class="group-heading">
          Disabled
        </h4>

        <UiInput
          id="input1"
          label="Basic"
        />
        <UiInput
          id="input1"
          label="Basic"
          disabled
        />

        <UiInput
          id="input2"
          label="With caption"
          caption="Caption"
        />
        <UiInput
          id="input2"
          label="With caption"
          caption="Caption"
          disabled
        />

        <UiInput
          id="input3"
          label="Clearable"
          clearable
          model-value="Value"
        />
        <UiInput
          id="input3"
          label="Clearable"
          clearable
          disabled
        />

        <UiInput
          id="input4"
          label="Copyable"
          copyable
          model-value="Value"
        />
        <UiInput
          id="input4"
          label="Copyable"
          copyable
          disabled
        />

        <UiInput
          id="input5"
          label="Password"
          native-type="password"
          model-value="superPassword"
        />
        <UiInput
          id="input5"
          label="Password"
          native-type="password"
          disabled
        />
      </div>
    </div>

    <!-- UiSearch -->
    <div class="doc-block half">
      <strong>UiSearch</strong>
      <h1>Поиск</h1>

      <div class="two-columns">
        <h4 class="group-heading">
          Normal
        </h4>
        <h4 class="group-heading">
          Disabled
        </h4>

        <UiSearch
          v-model="searchTerm"
          size="large"
          label="Large"
        />
        <UiSearch
          v-model="searchTerm"
          size="large"
          label="Large"
          disabled
        />

        <UiSearch
          v-model="searchTerm"
          size="medium"
          label="Medium"
        />
        <UiSearch
          v-model="searchTerm"
          size="medium"
          label="Medium"
          disabled
        />

        <UiSearch
          v-model="searchTerm"
          size="small"
          label="Small"
        />
        <UiSearch
          v-model="searchTerm"
          size="small"
          label="Small"
          disabled
        />
      </div>
    </div>

    <!-- UiSwitch -->
    <div class="doc-block third">
      <strong>UiSwitch</strong>
      <h1>Switch</h1>

      <div class="two-columns justify-items-center">
        <h4 class="group-heading">
          Normal
        </h4>
        <h4 class="group-heading">
          Disabled
        </h4>

        <UiSwitch id="switch" />
        <UiSwitch
          id="switch"
          disabled
        />

        <UiSwitch
          id="switch2"
          :loading="switchLoading"
          :before-change="beforeChange"
        />
        <UiSwitch
          id="switch2"
          :loading="switchLoading"
          disabled
        />
      </div>
    </div>

    <!-- UiCheckbox -->
    <div class="doc-block third">
      <strong>UiCheckbox</strong>
      <h1>Checkbox</h1>

      <div class="two-columns">
        <h4 class="group-heading">
          Normal
        </h4>
        <h4 class="group-heading">
          Disabled
        </h4>

        <UiCheckbox
          id="checkbox"
          label="Label"
          true-value="checkbox1"
        />
        <UiCheckbox
          id="checkbox"
          label="Label"
          true-value="checkbox1"
          disabled
        />

        <UiCheckbox
          id="checkbox"
          true-value="checkbox2"
        />
        <UiCheckbox
          id="checkbox"
          true-value="checkbox2"
          disabled
        />
      </div>
    </div>

    <!-- UiRadio -->
    <div class="doc-block third">
      <strong>UiRadio</strong>
      <h1>Radio</h1>

      <div class="two-columns">
        <h4 class="group-heading">
          Normal
        </h4>
        <h4 class="group-heading">
          Disabled
        </h4>

        <UiRadio
          id="radio"
          label="Label"
          value="radio1"
        />
        <UiRadio
          id="radio"
          label="Label"
          value="radio1"
          disabled
        />

        <UiRadio
          id="radio"
          value="radio2"
        />
        <UiRadio
          id="radio"
          value="radio2"
          disabled
        />
      </div>
    </div>

    <!-- UiAccordion -->
    <div class="doc-block">
      <strong>UiAccordion</strong>
      <h1>Спойлер \ Аккордеон</h1>

      <div style="width: 600px; margin: 0 auto">
        <UiAccordion>
          <UiAccordionItem title="Title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
            commodi, culpa delectus deleniti doloribus ducimus eaque eos eveniet
            expedita harum, in incidunt itaque magnam, nulla quam ratione
            recusandae reprehenderit veniam?
          </UiAccordionItem>

          <UiAccordionItem title="Title 2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
            exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
            minima molestias obcaecati odio omnis ratione recusandae,
            voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
            dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
            Aut consectetur cum dolores est exercitationem facilis fugiat
            incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
            <br>
            <br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
            exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
            minima molestias obcaecati odio omnis ratione recusandae,
            voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
            dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
            Aut consectetur cum dolores est exercitationem facilis fugiat
            incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
          </UiAccordionItem>

          <UiAccordionItem title="Title 3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
            exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
            minima molestias obcaecati odio omnis ratione recusandae,
            voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
            dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
            Aut consectetur cum dolores est exercitationem facilis fugiat
            incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
            <br>
            <br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
            exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
            minima molestias obcaecati odio omnis ratione recusandae,
            voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
            dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
            Aut consectetur cum dolores est exercitationem facilis fugiat
            incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
          </UiAccordionItem>
        </UiAccordion>
      </div>
    </div>

    <!-- UiAlert -->
    <div class="doc-block">
      <strong>UiAlert</strong>
      <h1>Алерты</h1>

      <div
        class="three-columns"
        style="justify-items: center"
      >
        <div
          class="w-100"
          style="max-width: 400px"
        >
          <UiAlert
            v-for="type in [
              'neutral',
              'positive',
              'warning',
              'negative',
              'marketing',
            ]"
            :key="type"
            class="my-8"
            :type="type"
            text="Текст сообщения"
          />
        </div>

        <div
          class="w-100"
          style="max-width: 400px"
        >
          <UiAlert
            v-for="type in [
              'neutral',
              'positive',
              'warning',
              'negative',
              'marketing',
            ]"
            :key="type"
            class="my-8"
            :type="type"
            title="Заголовок"
            text="Текст сообщения"
          />
        </div>

        <div
          class="w-100"
          style="max-width: 400px"
        >
          <UiAlert
            v-for="type in [
              'neutral',
              'positive',
              'warning',
              'negative',
              'marketing',
            ]"
            :key="type"
            :type="type"
            class="my-8"
            title="Заголовок"
            text="Текст сообщения"
          >
            <template #action>
              <UiButton type="link">
                Действие
              </UiButton>
            </template>
          </UiAlert>
        </div>
      </div>
    </div>

    <!-- UiBadge -->
    <div class="doc-block">
      <strong>UiBadge</strong>
      <h1>Бейджы</h1>

      <div
        class="three-columns"
        style="justify-items: center"
      >
        <div>
          <UiBadge
            v-for="type in [
              'neutral',
              'positive',
              'warning',
              'negative',
              'marketing',
            ]"
            :key="type"
            class="my-8"
            :type="type"
            text="Текст бейджа"
          />
        </div>

        <div>
          <UiBadge
            v-for="type in [
              'neutral',
              'positive',
              'warning',
              'negative',
              'marketing',
            ]"
            :key="type"
            class="my-8"
            :type="type"
            text="Текст бейджа"
            :icon="randomIcon()"
          />
        </div>

        <div>
          <UiBadge
            v-for="type in [
              'neutral',
              'positive',
              'warning',
              'negative',
              'marketing',
            ]"
            :key="type"
            :type="type"
            class="my-8"
            text="Текст бейджа"
          >
            <template #prefix>
              <i :class="`icon-${randomIcon()}`" />
            </template>
            <template #suffix>
              <i :class="`icon-${randomIcon()}`" />
            </template>
          </UiBadge>
        </div>
      </div>
    </div>

    <!-- Notification -->
    <div class="doc-block">
      <strong>useNotify \ $notify</strong>
      <h1>Уведомления</h1>

      <div
        style="
          display: grid;
          grid-template-columns: repeat(2, 150px);
          justify-content: center;
          gap: 8px;
        "
      >
        <UiButton @click="randomNotification('top-left')">
          Top left
        </UiButton>
        <UiButton @click="randomNotification('top-right')">
          Top Right
        </UiButton>
        <UiButton @click="randomNotification('bottom-left')">
          Bottom left
        </UiButton>
        <UiButton @click="randomNotification('bottom-right')">
          Bottom Right
        </UiButton>
      </div>
    </div>

    <!-- CopyButton -->
    <div class="doc-block">
      <strong>UiCopyButton</strong>
      <h1>Кнопка копирования</h1>

      <div
        style="
          display: grid;
          grid-template-columns: repeat(1, 150px);
          justify-content: center;
          gap: 8px;
        "
      >
        <UiCopyButton
          title="Payment link"
          pressed-title="Link copied"
          value="Test value"
        />
      </div>
    </div>

    <!-- Icons -->
    <!--    <div -->
    <!--      v-for="(font, index) in [icons, smallIcons]" -->
    <!--      :key="font.metadata.name" -->
    <!--      class="doc-block half" -->
    <!--    > -->
    <!--      <strong> -->
    <!--        {{ _ === 0 ? '<i class="icon-*" />' : '<i class="icon-s-*" />' }} -->
    <!--      </strong> -->
    <!--      <h1>Иконки - {{ font.metadata.name }}</h1> -->

    <!--      <div> -->
    <!--        <div -->
    <!--          v-for="(iconSet, index) in font.iconSets" -->
    <!--          :key="_" -->
    <!--          class="icons-grid" -->
    <!--        > -->
    <!--          <div -->
    <!--            v-for="icon in iconSet.selection" -->
    <!--            :key="icon.name" -->
    <!--            class="preview-icon" -->
    <!--            @click="copy(icon.name)" -->
    <!--          > -->
    <!--            <i :class="`${font.preferences.fontPref.prefix}${icon.name}`" /> -->
    <!--            <span>{{ icon.name }}</span> -->
    <!--          </div> -->
    <!--        </div> -->
    <!--      </div> -->
    <!--    </div> -->
  </div>
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { ALERT_TYPES } from 'ui-layer/components/alert/types'
import type { NotificationPlacement } from 'ui-layer/components/notification/types'
import { sample } from 'lodash-es'
import icons from '#build/ui/available-icons'

definePageMeta({
  layout: 'empty',
  dev: true,
})

const searchTerm = ref<string>()
const switchLoading = ref(false)

useForm()

function copy(value: string) {
  navigator.clipboard.writeText(value)
}

async function beforeChange() {
  switchLoading.value = true

  const result = await new Promise(resolve =>
    setTimeout(() => resolve(true), 1000),
  )

  switchLoading.value = false

  return result
}

const selectOptions = computed(() => {
  return Array.from(Array(300).keys()).map(i => `Option ${i + 1}`)
})

let notificationTypeCounter = 0
function randomNotification(placement: NotificationPlacement) {
  const notify = useNotify()

  notify({
    placement,
    text: 'Текст',
    title: 'Заголовок',
    type: ALERT_TYPES[notificationTypeCounter],
  })

  notificationTypeCounter++
  notificationTypeCounter %= ALERT_TYPES.length
}

function randomIcon() {
  return sample(icons.filter(icon => icon.startsWith('s-')))
}
</script>

<style lang="scss" scoped>
.root {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
}

.doc-block {
  background-color: $clr-white;
  border-radius: 30px;
  padding: 40px 60px;
  grid-column: span 6;

  &.third {
    grid-column: span 2;
  }

  &.half {
    grid-column: span 3;
  }

  > strong {
    color: $clr-grey-600;
  }

  > h1 {
    margin-bottom: 40px;
  }
}

.separator {
  width: 100%;
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.buttons-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.buttons-grid {
  display: flex;
  gap: 6px;
}

.icons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.preview-icon {
  display: flex;
  border-radius: 8px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 85px;
  height: 65px;
  text-align: center;
  background-color: $clr-grey-100;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease-out;

  &:hover,
  &:focus {
    background-color: $clr-grey-200;
  }

  &:active {
    background-color: $clr-grey-300;
  }

  span {
    @include txt-s-m;
  }
}

.group-heading {
  text-align: center;
  color: $clr-grey-500;
}
</style>
