<template>
    <div class="flex flex-col w-full">
        <template v-if="$isSignIn">
            <div class="flex flex-grow justify-between items-center p-4">
                <UDropdown class="flex flex-grow" :items="items">
                    <UButton class="flex flex-grow" color="gray" variant="ghost">
                        <div class="flex flex-grow items-center gap-2">
                            <UAvatar :src="$info.avatar" />
                            <div>{{ $info.name }}</div>
                            <UBadge v-if="$info.pro" size="xs" color="yellow" variant="soft" label="PRO" />
                            <UBadge v-else size="xs" color="gray" variant="soft" label="FREE" />
                        </div>
                        <UIcon name="i-heroicons-chevron-down-20-solid" />
                    </UButton>
                </UDropdown>
            </div>
            <UDivider />
        </template>
        <div class="flex justify-between gap-2 p-4">
            <UButton
                class="flex-grow"
                color="gray"
                variant="ghost"
                label="问题反馈"
            />
            <UButton
                :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
                color="gray"
                variant="ghost"
                aria-label="Theme"
                @click="isDark = !isDark"
            />
            <USelectMenu
                :ui-menu="{ width: 'w-32' }"
                :model-value="$lang"
                :options="$langOptions"
                value-attribute="value"
            >
                <UButton
                    icon="i-heroicons-language-20-solid"
                    color="gray"
                    variant="ghost"
                />
            </USelectMenu>
        </div>
    </div>
</template>
<script setup>
const { $isSignIn, $info } = useUserStore()
const { $lang, $langOptions } = useI18nStore()
const colorMode = useColorMode()
const isDark = computed({
    get () {
        return colorMode.value === 'dark'
    },
    set () {
        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
    }
})

const items = [
    [
        {
            label: '账号信息',
            icon: 'i-heroicons-user'
        },
        {
            label: '用户反馈',
            icon: 'i-heroicons-chat-bubble-oval-left-ellipsis'
        }
    ],
    [
        {
            label: '退出登录',
            icon: 'i-heroicons-power'
        }
    ]
]
</script>
