<template>
  <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
    <!-- product -->
    <div class="space-25-55-75 flex flex-col items-center">
      <div :class="[
        'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
        itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
      ]">
        <Product v-for="product in productStore.productList" :key="product.id" :product="product" />
      </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>
      <nuxt-link
        :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
        <UiButtonArrow type="fill" :arrow="true">
          {{ $t("eshop") }}
        </UiButtonArrow>
      </nuxt-link>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Product from './Product.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 >= 1600) itemCount.value = 4
  else if (width >= 1200) 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>
