<template>
  <div class="home">
    <home-hero />
    <home-categories />
    <home-ad />
    <home-brands :brands="brands" />
    <home-blog :posts="posts" />
  </div>
</template>

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

const {t} = useI18n();
const { $notify } = useNuxtApp();
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 { brands, getBrands } = useBrands();
await getBrands();
const { posts } = usePosts();
const { tags } = useProductTags();
const { products: newProducts } = useProducts({ productOrderBy: '-modified' });
const { products: priceProducts } = useProducts({ productOrderBy: '-price' });

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.setActiveAuthState('new-password');
  }

  if (route.path.includes('payment')) {
    $notify({
      message: t('popup.payment'),
      type: 'info'
    });
  }

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

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