<template>
  <div class="collection">
    <div class="container">
      <div class="collection__wrapper">
        <h2 class="collection__title">{{ t('home.collection.title') }}</h2>
        <div class="collection__inner">
          <home-collection-inner
              v-for="tag in tags"
              :key="tag.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>
import {useI18n} from "vue-i18n";
import HomeCollectionInner from "@/components/home/home-collection-inner.vue";
import {useProducts, useProductTags} from "@/composables/products";
import {computed, onMounted} from "vue";

const {t} = useI18n()

const { tags, loading: tagsLoading, getProductTags } = useProductTags();
const {
  products: newProducts,
  loading: newLoading,
  getProducts: getNewProducts
} = useProducts();

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

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

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

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

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

  &__title {
    font-size: 72px;
    font-weight: 900;
    color: #dd6878;
  }

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