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

import useGetAccount from "~/composables/api/account/useGetAccount";

// types

type Props = {
    isShow: boolean;
};

// props

defineProps<Props>();

// state

const route = useRoute();

const profileLinks = ref([
    {
        icon: "ci:bi-person-vcard",
        title: "پروفایل",
        path: { name: "profile" },
    },
    {
        icon: "ci:bi-map",
        title: "آدرس ها",
        path: { name: "profile-addresses" },
    },
    {
        icon: "ci:bi-cart",
        title: "خرید ها و سفارش ها",
        path: { name: "profile-purchases-and-orders" },
        matchPattern: /^profile-purchases-and-orders/,
    },
    {
        icon: "ci:bi-bookmark",
        title: "علاقه‌مندی ها",
        path: { name: "profile-saved-products" },
        matchPattern: /^profile-saved-products/,
    },
    {
        icon: "ci:bi-ticket",
        title: "تیکت ها",
        path: { name: "profile-tickets" },
        matchPattern: /^profile-ticket/,
    },
    {
        icon: "ci:bi-bell",
        title: "اعلانات",
        path: { name: "profile-notifications" },
    },
]);

// queries

const { data: account, suspense } = useGetAccount();

await suspense();

// methods

const isLinkActive = (link: any) => {
    if (link.matchPattern) {
        return link.matchPattern.test(route.name);
    } else {
        return route.name === link.path.name;
    }
};

// inject

const toggleSidebar = inject("toggleSidebar");
</script>

<template>
    <div
        class="max-lg:absolute max-lg:inset-0 w-full max-lg:bg-white lg:w-3/12 flex flex-col gap-4 z-[99] max-lg:container transition-all duration-[400ms] max-lg:h-[calc(100svh-65px)]"
        :class="!isShow ? 'max-lg:translate-x-full' : 'translate-x-0'"
    >
        <div class="w-full rounded-xl bg-slate-50 border border-slate-200 p-4">
            <div class="flex items-center justify-between w-full">
                <div class="flex flex-col items-start gap-1">
                    <span class="flex font-semibold text-dynamic-primary">
                        <p v-if="account?.first_name">
                            {{ `${account?.first_name} ${account?.last_name}` }}
                        </p>
                        <p v-else>بدون نام کاربری</p>
                    </span>
                    <NuxtLink
                        :to="{ name: 'profile' }"
                        class="text-xs font-semibold text-cyan-500"
                        @click="toggleSidebar"
                    >
                        ویرایش اطلاعات
                    </NuxtLink>
                </div>
                <Avatar
                    class="!size-12"
                    :src="account!.profile_photo"
                    :alt="
                        account?.first_name && account?.last_name
                            ? `${account?.first_name.charAt(0)} ${account?.last_name.charAt(0)}`
                            : 'بدون نام کاربری'
                    "
                />
            </div>
        </div>

        <div class="w-full flex flex-col gap-2 rounded-xl bg-slate-50 border border-slate-200 p-4">
            <NuxtLink
                v-for="(link, index) in profileLinks"
                :key="index"
                :to="{ ...link.path }"
                :class="
                    isLinkActive(link) ? 'bg-black text-slate-100 **:fill-slate-100' : '**:fill-black hover:bg-gray-200'
                "
                class="flex items-center justify-between transition-all rounded-lg py-3.5 lg:py-4 px-3"
                @click="toggleSidebar"
            >
                <span class="flex-center gap-3">
                    <div class="size-5 flex-center">
                        <Icon :name="link.icon" />
                    </div>
                    <span class="text-xs lg:text-sm">{{ link.title }}</span>
                </span>

                <Icon
                    name="ci:bi-chevron-left"
                    class="transition-all"
                />
            </NuxtLink>

            <LogoutModal>
                <template #trigger>
                    <button
                        class="w-full flex items-center cursor-pointer justify-between transition-all rounded-lg py-4 px-3 hover:bg-danger-100 text-danger-500 **:fill-danger-100"
                    >
                        <span class="flex-center gap-3">
                            <div class="size-5 flex-center">
                                <Icon
                                    name="ci:bi-arrow-bar-right"
                                    class="**:fill-danger-500"
                                />
                            </div>
                            <span class="text-xs lg:text-sm"> خروج از حساب </span>
                        </span>

                        <Icon
                            name="ci:bi-chevron-left"
                            class="transition-all **:fill-danger-500"
                        />
                    </button>
                </template>
            </LogoutModal>
        </div>
    </div>
</template>

<style scoped></style>
