<template>
  <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
    <div
      :class="[
        'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
        itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
      ]"
    >
      <!-- product -->
      <div
        v-for="(item, index) in productStore.productList"
        :key="index"
        class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
      >
        <img
          :src="`/api/public/file/${item.cover_picture_uuid}.webp`"
          alt="pics"
          class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
        >
        <div class="flex flex-col justify-between h-full">
          <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
            <h3
              class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
            >
              {{ item.name }}
            </h3>
            <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
              {{ item.tax_name }}
            </p>
          </div>
          <div class="flex items-center justify-between">
            <p class="text-accent-green-light text-bold-24">
              {{ item.formatted_price }}
            </p>
            <button
              class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
              @click="productStore.incrementCartItem(item.id)"
            >
              <i
                class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
              />
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-6 md:flex-row items-center justify-between">
      <h3
        class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
      >
        Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
        vás ochrání zítra
      </h3>
      <UiButtonArrow
        type="fill"
        :arrow="true"
        @click="menuStore.navigateToShop"
      >
        {{ $t("eshop") }}
      </UiButtonArrow>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

defineProps<{
  component: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
  }
}>()

const menuStore = useMenuStore()
const itemCount = ref(4)
const productStore = useProductStore()

async function updateItemCount() {
  const width = window.innerWidth
  if (width >= 1800) itemCount.value = 5
  else if (width >= 1200) itemCount.value = 4
  else if (width >= 768) itemCount.value = 3
  else if (width >= 640) itemCount.value = 2
  else itemCount.value = 1
}

watch(itemCount, async () => {
  await productStore.getList(itemCount.value)
})

onMounted(async () => {
  await updateItemCount()
  window.addEventListener('resize', updateItemCount)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateItemCount)
})
</script>
