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

import useGetAccount from "~/composables/api/account/useGetAccount";
import { useAuth } from "~/composables/api/auth/useAuth";
import { useToast } from "~/composables/global/useToast";

// state

const { logout } = useAuth();
const { addToast } = useToast();
const router = useRouter();

const profileDropdownItems = ref<DropdownItem[]>([
    {
        title: "خرید ها و سفارش ها",
        icon: "ci:cart",
        onClick: () => router.push({ name: "profile-purchases-and-orders" }),
    },
    {
        title: "پشتیبانی",
        icon: "ci:headphones",
        onClick: () => router.push({ name: "profile-ticket" }),
    },
    {
        title: "خروج از حساب",
        icon: "ci:bi-arrow-bar-left",
        itemClass: "!text-red-500",
        iconClass: "**:stroke-red-500 **:fill-transparent",
        onClick: () => {
            logout();
            nextTick(() => {
                addToast({
                    message: "با موفقیت از حساب خارج شدید",
                    options: {
                        status: "success",
                    },
                });
            });
        },
    },
]);

// queries

const { data: account } = useGetAccount();
</script>

<template>
    <Dropdown>
        <template #trigger>
            <button
                v-if="!!account"
                class="flex items-center justify-center"
            >
                <Avatar
                    class="!size-7"
                    :src="account.profile_photo"
                    :alt="
                        account.first_name && account.last_name
                            ? `${account.first_name.charAt(
                                  0
                              )} ${account.last_name.charAt(0)}`
                            : ''
                    "
                />
            </button>
        </template>

        <template #content>
            <DropdownMenuContent
                class="min-w-[220px] w-full outline-none bg-gray-50 border border-gray-400 rounded-2xl font-iran-yekan-x shadow-2xl will-change-[opacity,transform] data-[side=top]:animate-slide-up-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-down-fade data-[side=left]:animate-slide-right-fade z-10000"
                :side-offset="5"
            >
                <div
                    class="w-full flex items-center justify-between gap-2 px-2 border-b border-gray-400"
                >
                    <div
                        v-if="!!account"
                        class="flex items-center justify-start py-2"
                    >
                        <Avatar
                            :src="account.profile_photo"
                            class="!size-8"
                            :alt="
                                account.first_name && account.last_name
                                    ? `${account.first_name.charAt(
                                          0
                                      )} ${account.last_name.charAt(0)}`
                                    : 'بدون نام کاربری'
                            "
                        />
                        <span class="typo-label-xs text-black">{{
                            `${account.first_name} ${account.last_name}`
                        }}</span>
                    </div>
                    <NuxtLink
                        :to="{ name: 'profile' }"
                        class="aspect-square rounded-sm size-7 flex-center"
                    >
                        <Icon
                            name="ci:bi-pencil"
                            class="**:fill-black"
                            size="14"
                        />
                    </NuxtLink>
                </div>

                <div class="flex-col flex p-2">
                    <DropdownMenuItem
                        v-for="(item, index) in profileDropdownItems"
                        :key="index"
                        @click="item.onClick"
                        :class="
                            item.itemClass
                                ? item.itemClass
                                : 'hover:!text-black'
                        "
                        class="group text-xs leading-none text-black hover:!bg-gray-200 cursor-pointer border-none rounded-md flex items-center justify-start py-1 relative select-none outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-black data-[highlighted]:text-white"
                    >
                        <div class="size-8 flex-center">
                            <Icon
                                :name="item.icon"
                                :class="item.iconClass"
                                size="16"
                                class="**:stroke-black"
                            />
                        </div>
                        <span>
                            {{ item.title }}
                        </span>
                    </DropdownMenuItem>
                </div>

                <DropdownMenuArrow class="fill-gray-50 stroke-gray-400" />
            </DropdownMenuContent>
        </template>
    </Dropdown>
</template>

<style scoped></style>
