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

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

    <ProductVariations v-if="colors?.length > 1" />

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

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

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

    <div class="product-description__sizes">
      <div
        v-for="option in currentVariant?.options"
        :key="option"
        class="product-description__size"
        @click="() => currentSize = option"
      >
        <UButton
          block
          :label="getAttribute(option?.attributes, 'size')?.option"
          :disabled="option?.stock_status === 'outofstock'"
          :variant="currentSize === option ? undefined : 'outline'"
        />
      </div>
    </div>

    <UButton
      :disabled="!currentSize"
      class="justify-content-center"
      label="Добавить в корзину"
      size="xl"
      @click="addToCartBtn()"
    />

    currentSize
    <pre>
    {{ currentSize }}
    </pre>
    <UAccordion :items="items" />
  </div>
</template>

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

const { t } = useI18n()
const { cartAddItem } = useCart()

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

const currentSize = ref(undefined)

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 дней',
  },
])

function addToCartBtn() {
  cartAddItem({ variation_id: currentSize?.value?.id })
}
</script>

<style lang="scss">
.product-description {
  width: 100%;
  max-width: 335px;

  @media (min-width: 768px) {
    position: sticky;
    align-self: self-start;
    top: 40px;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
  }

  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>
