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

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

    <div class="product-description__variations">
      <div
        v-for="variation in productsVariationsData"
        :key="variation?.id"
        @click="() => currentVariantId = variation?.id"
      >
        <div class="product-description__variation">
          <img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
        </div>
      </div>
    </div>

    <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 type { AccordionItem } from '@nuxt/ui'
import { useCurrentProduct, useProduct } from '~/composables'

const { t } = useI18n()

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

const currentSize = ref(0)

const items = ref<AccordionItem[]>([
  {
    label: 'Описание товара',
    icon: 'i-heroicons-document-text',
    content: productsData?.value?.description,
  },
  {
    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 scoped lang="scss">
.product-description {
  padding-top: 50px;

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

  width: 400px;
  padding-inline: 30px;

  &__variations {
    padding: 10px;
    border-radius: 10px;
    background: white;
    display: flex;
    flex-direction: row;
    gap: 4px;
  }

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

  &__size {
    width: 65px;
  }

  &__variation {
    img {
      border-radius: 10px;
    }
  }

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