<template>
  <div class="product-description">
    <h1>{{ productsData?.name }}</h1>

    <h2>{{ currentVariant?.price }}  <Icon name="ph:currency-rub" /></h2>

    <ProductVariations />

    <div>
      {{ `Цвет: ${t(`colors.${currentColor}`)}` }}
    </div>

    <div>
      {{ `Материал: ${t(`materials.${currentMaterial}`)}` }}
    </div>

    <div>
      Размер
    </div>

    <div class="product-description__sizes">
      <div
        v-for="size in sizes"
        :key="size"
        class="product-description__size"
        @click="() => currentSize = size"
      >
        <UButton block :label="size" :variant="currentSize === size ? undefined : 'outline'" />
      </div>
    </div>

    <UButton class="justify-content-center" label="Добавить в корзину" size="xl" />

    <UAccordion :items="items" />
  </div>
</template>

<script setup lang="ts">
import ProductVariations from '~/components/ProductVariations.vue'
import { useCurrentProduct, useProduct } from '~/composables'

const { t } = useI18n()

const { productsData, sizes } = useProduct()
const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()

const currentSize = ref(0)

const items = computed(() => [
  {
    label: 'Описание товара',
    icon: 'i-heroicons-document-text',
    content: productsData?.value?.description?.replace(/<\/?p>/g, ''),
  },
  {
    label: 'Состав и параметры',
    icon: 'i-heroicons-beaker',
    content: 'хлопок 100%',
  },
  {
    label: 'Рекомендации по уходу',
    icon: 'i-heroicons-sparkles',
    content: 'Бережная стирка при максимальной температуре 30ºС\nНе отбеливать\nМашинная сушка запрещена\nГлажение при 110ºС\nПрофессиональная сухая чистка',
  },
  {
    label: 'Доставка и оплата',
    icon: 'i-heroicons-truck',
    content: 'Доставка в пункт выдачи',
  },
  {
    label: 'Возврат и обмен',
    icon: 'i-heroicons-arrow-path',
    content: 'Возврат в течение 14 дней\nОбмен размера в течение 7 дней',
  },
])
</script>

<style lang="scss">
.product-description {
  position: sticky;
  align-self: self-start;
  top: 40px;
  overflow-y: auto;
  width: 335px;

  padding-top: 30px;
  padding-inline: 30px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  &__sizes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  &__size {
    width: 65px;
  }

  h2 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    text-align: center;
  }
}
</style>
