<script setup lang="ts">
// import

import useGetAccount from "~/composables/api/account/useGetAccount";
import { useAuth } from "~/composables/api/auth/useAuth";
import useGetCategories from "~/composables/api/categories/useGetCategories";
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
import { NAV_LINKS } from "~/constants";

// state

const route = useRoute();
const { token } = useAuth();
const isSideDrawerOpen = ref(false);
const isCategoriesMenuOpen = ref(false);

// queries

const { data: account } = useGetAccount();
const { data: cart } = useGetCartOrders();
const { data: categories } = useGetCategories();

// computed

const isHomePage = computed(() => route.path === "/");

const megaMenuCategories = computed(() => {
    if (categories.value) {
        return categories.value.map((item) => {
            return {
                title: item.name,
                subitems: item.subcategorys.map((item) => {
                    return {
                        title: item.name,
                        subitems: item.subcategorys.map((item) => {
                            return {
                                title: item.name,
                                link: item.slug,
                            };
                        }),
                    };
                }),
            };
        });
    }

    return [];
});
</script>

<template>
    <header
        id="header-navbar"
        class="w-full flex-center"
        :class="isHomePage ? 'fixed top-0 left-0 z-999' : 'z-999'"
    >
        <div class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0">
            <button
                class="md:hidden header-navbar-item"
                @click="isSideDrawerOpen = true"
            >
                <Icon
                    name="ci:humbleicons-bars"
                    size="28"
                />
            </button>
            <div class="max-md:hidden flex items-center gap-8 lg:gap-16">
                <div class="flex items-center justify-end gap-4 lg:gap-[1.5rem]">
                    <Tooltip
                        v-if="!!account && !!token"
                        title="حساب کاربری"
                    >
                        <NuxtLink
                            :to="{ name: 'profile' }"
                            class="flex items-center justify-center"
                        >
                            <Avatar
                                class="!size-7"
                                iconClass="header-navbar-item"
                                :src="account.profile_photo"
                                :alt="
                                    account.first_name && account.last_name
                                        ? `${account.first_name.charAt(0)} ${account.last_name.charAt(0)}`
                                        : 'بدون نام کاربری'
                                "
                            />
                        </NuxtLink>
                    </Tooltip>
                    <Tooltip
                        v-else
                        title="ورود"
                    >
                        <NuxtLink
                            to="/signin"
                            class="flex-center header-navbar-item"
                        >
                            <!-- <Icon
                                name="ci:profile"
                                class="**:stroke-black size-5 lg:size-6 header-navbar-item"
                            /> -->
                            <NuxtImg
                                src="/img/navbar/profile.gif"
                                class="size-7 lg:size-8 mt-0.5"
                            />
                        </NuxtLink>
                    </Tooltip>
                    <Tooltip title="محصولات">
                        <NuxtLink
                            to="/products"
                            class="flex-center header-navbar-item"
                        >
                            <!-- <Icon
                                name="ci:search"
                                class="**:stroke-black size-4.5 lg:size-[21px]"
                            /> -->
                            <NuxtImg
                                src="/img/navbar/search.gif"
                                class="size-7 lg:size-8 mt-0.5"
                            />
                        </NuxtLink>
                    </Tooltip>
                    <Tooltip title="سبد خرید">
                        <NuxtLink
                            to="/cart"
                            class="flex-center header-navbar-item"
                        >
                            <button class="relative">
                                <!-- <Icon
                                    name="ci:cart"
                                    class="**:stroke-black size-5 lg:size-6 header-navbar-item"
                                /> -->
                                <NuxtImg
                                    src="/img/navbar/cart.gif"
                                    class="size-7 lg:size-8"
                                />

                                <div
                                    v-if="cart?.items.length! > 0"
                                    class="size-2 shrink-0 absolute -bottom-1.5 -right-1.5 rounded-full bg-red-600 after:size-[125%] after:absolute after:bg-red-600 flex-center after:rounded-full after:animate-ping"
                                />
                            </button>
                        </NuxtLink>
                    </Tooltip>
                </div>

                <nav
                    class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80 header-navbar-item"
                >
                    <NuxtLink
                        v-for="(link, index) in NAV_LINKS"
                        :key="index"
                        :to="link.path"
                        @click="isCategoriesMenuOpen = false"
                        class="underline-offset-[10px]"
                        :activeClass="isCategoriesMenuOpen ? 'no-underline' : 'underline'"
                        :class="isCategoriesMenuOpen && link.title === 'دسته بندی ها' ? 'underline' : ''"
                        @mouseenter="link.title === 'دسته بندی ها' ? (isCategoriesMenuOpen = true) : undefined"
                    >
                        {{ link.title }}
                    </NuxtLink>
                </nav>
            </div>

            <div class="header-navbar-item flex items-center justify-end h-full">
                <!-- <NuxtImg
                    src="/img/heymlz/heymlz-logomotion.gif"
                    preload
                    loading="eager"
                    fetch-priority="high"
                    class="h-2/3"
                /> -->
                <NuxtImg
                    src="/img/heymlz/heymlz-logomotion.gif"
                    preload
                    loading="eager"
                    fetch-priority="high"
                    class="h-2/3"
                />
            </div>
        </div>
    </header>

    <SideDrawer v-model="isSideDrawerOpen" />

    <MegaMenu
        :items="megaMenuCategories"
        v-model:isOpen="isCategoriesMenuOpen"
    />
</template>
