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

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

// type

type Props = {
    modelValue: boolean;
};

// props

defineProps<Props>();

// state

const { token } = useAuth();
const { data: account } = useGetAccount();

// emit

const emit = defineEmits(["update:modelValue"]);

// method

const closeSideDrawer = () => {
    emit("update:modelValue", false);
};
</script>

<template>
    <Transition name="fade">
        <div
            v-if="modelValue"
            class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
            @click="closeSideDrawer"
        />
    </Transition>

    <div
        @click.stop
        :class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
        class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all duration-500 rounded-e-xl flex-col bg-white w-[300px] h-full gap-8 pt-12"
    >
        <div class="flex items-center flex-col justify-end gap-[1.5rem]">
            <Tooltip v-if="!!account && !!token" title="حساب کاربری">
                <NuxtLink
                    :to="{ name: 'profile' }"
                    class="!size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border-[1.2px] border-black"
                >
                    <Avatar
                        class="!size-[1.6rem]"
                        :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">
                    <Icon
                        name="ci:profile"
                        size="24px"
                        class="**:stroke-black"
                    />
                </NuxtLink>
            </Tooltip>
            <Tooltip title="محصولات">
                <NuxtLink to="/products" class="flex-center">
                    <Icon
                        name="ci:search"
                        size="21px"
                        class="**:stroke-black"
                    />
                </NuxtLink>
            </Tooltip>
            <Tooltip title="سبد خرید">
                <NuxtLink to="/cart" class="flex-center">
                    <Icon name="ci:cart" size="24px" class="**:stroke-black" />
                </NuxtLink>
            </Tooltip>
        </div>

        <nav
            class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
        >
            <NuxtLink
                v-for="(link, index) in NAV_LINKS"
                :key="index"
                :to="link.path"
            >
                {{ link.title }}
            </NuxtLink>
        </nav>
    </div>
</template>
