<template>
  <div class="home">
    <home-hero />
    <home-brands :brands="brands" />
    <home-collection
        :tags="tags"
        :newProducts="newProducts"
        :priceProducts="priceProducts"
    />
    <home-category-tags />
  </div>
</template>

<script setup lang="ts">
import {useUserActivation} from "~/composables/user";
import { useRouteQuery } from '@vueuse/router';
import {useBrands} from "~/composables/brands";
import {useProducts, useProductTags} from "~/composables/products";
import type {IProduct} from "~/types";

const {t} = useI18n();
const appStore = useAppStore();
const route = useRoute();

useHead({
  title: t('breadcrumbs.home'),
})

const token = useRouteQuery('token', '');
const uid = useRouteQuery('uid', '');
const referrer = useRouteQuery('referrer', '');

const { activateUser } = useUserActivation();

const newProducts = ref<{ cursor: string; node: IProduct }[]>([]);
const priceProducts = ref<{ cursor: string; node: IProduct }[]>([]);
const { brands } = useBrands();
const { tags } = useProductTags();
const { products, getProducts } = useProducts();

await getProducts({ orderBy: '-modified' });
newProducts.value = products.value;

await getProducts({ orderBy: '-price' });
priceProducts.value = products.value;

onMounted( async () => {
  if (route.path.includes('activate-user') && token.value && uid.value) {
    await activateUser(token.value, uid.value);
  }

  if (route.path.includes('reset-password') && token.value && uid.value) {
    appStore.setActiveState('new-password');
  }

  if (referrer.value) {
    appStore.setActiveState('register');
  }
});
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  gap: 125px;
}
</style>