<template>
  <div class="collection">
    <ui-title>{{ t('home.collection.title') }}</ui-title>
    <div class="container">
      <div class="collection__wrapper">
        <div class="collection__inner">
          <home-collection-inner
              v-for="tag in tags"
              :key="tag.node.uuid"
              :tag="tag.node"
          />
          <home-collection-inner
              v-if="newProducts.length > 0"
              :tag="newProductsTag"
          />
          <home-collection-inner
              v-if="priceProducts.length > 0"
              :tag="priceProductsTag"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useProducts, useProductTags} from "@/composables/products";

const { t } = useI18n()

const { tags } = await useProductTags();
const {
  products: newProducts,
  getProducts: getNewProducts
} = await useProducts();

const {
  products: priceProducts,
  getProducts: getPriceProducts
} = await useProducts();

const newProductsTag = computed(() => {
  return {
    name: t('home.collection.newTag'),
    tagName: t('home.collection.newTag'),
    uuid: 'new-products',
    productSet: {
      edges: newProducts.value
    }
  }
});

const priceProductsTag = computed(() => {
  return {
    name: t('home.collection.cheapTag'),
    tagName: t('home.collection.cheapTag'),
    uuid: 'price-products',
    productSet: {
      edges: priceProducts.value
    }
  }
});

await Promise.all([
  getNewProducts({
    orderBy: '-modified'
  }),
  getPriceProducts({
    orderBy: '-price'
  })
]);
</script>

<style lang="scss" scoped>
.collection {
  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  &__inner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px;
  }
}
</style>