<template>
  <header class="header">
    <router-link :to="translations.i18nRoute({ name: 'home' })">
      <img class="header__logo" src="@images/evibes-big-simple.png" alt="logo">
    </router-link>
    <base-header-catalogue />
    <base-header-search />
    <div class="header__actions">
      <router-link :to="translations.i18nRoute({ name: 'wishlist' })" class="header__actions-item">
        <div>
          <ui-counter>0</ui-counter>
<!--          <counter-skeleton />-->
          <i class="pi pi-heart"></i>
        </div>
        <p>{{ t('header.actions.wishlist') }}</p>
      </router-link>
      <router-link :to="translations.i18nRoute({ name: 'cart' })" class="header__actions-item">
        <div>
          <ui-counter>0</ui-counter>
<!--          <counter-skeleton />-->
          <i class="pi pi-shopping-cart"></i>
        </div>
        <p>{{ t('header.actions.cart') }}</p>
      </router-link>
      <router-link
          :to="translations.i18nRoute({ name: 'home' })"
          class="header__actions-item"
          v-if="isAuthenticated"
      >
        <i class="pi pi-user"></i>
        <p>{{ t('header.actions.user') }}</p>
      </router-link>
      <div
          class="header__actions-item"
          @click="appStore.setActiveState('login')"
          v-else
      >
        <i class="pi pi-user"></i>
        <p>{{ t('header.actions.user') }}</p>
      </div>
    </div>
    <ui-language-switcher />
  </header>
</template>

<script setup>
import {computed, onMounted} from "vue";
import {useCategories} from "@/composables/categories/index.js";
import translations from "@/core/helpers/translations.js";
import {useI18n} from "vue-i18n";
import BaseHeaderSearch from "@/components/base/header/base-header-search.vue";
import UiLanguageSwitcher from "@/components/ui/ui-language-switcher.vue";
import {useUserStore} from "@/stores/user.js";
import {useAppStore} from "@/stores/app.js";
import UiCounter from "@/components/ui/ui-counter.vue";
import CounterSkeleton from "@/components/skeletons/ui/counter-skeleton.vue";
import BaseHeaderCatalogue from "@/components/base/header/base-header-catalogue.vue";

//TODO: add categories to header

const {t} = useI18n()
const userStore = useUserStore()
const appStore = useAppStore()

const isAuthenticated = computed(() => userStore.user)

const { categories, loading, getCategories } = useCategories();

onMounted(async () => {
  await getCategories()
})
</script>

<style lang="scss" scoped>
.header {
  box-shadow: 0 1px 2px #0000001a;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: $white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 10px 25px;

  &__logo {
    width: 150px;
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 15px;

    &-item {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 7px 10px;
      border-radius: $default_border_radius;
      transition: 0.2s;

      @include hover {
        background-color: #f7f7f7;
        color: $accent;
      }

      & div {
        position: relative;
      }

      & i {
        transition: 0.2s;
        font-size: 24px;
      }

      & p {
        transition: 0.2s;
        font-size: 12px;
      }
    }
  }
}
</style>