<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
import { NButton } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useAppStore, useUserStore } from '@/store'
import { emitter } from '@/plugins'
import { storeToRefs } from 'pinia'
import Setting from '@/components/common/Setting/SettingIndex.vue'
import { inject } from 'vue'

const show = ref(false)

const { isMobile } = useBasicLayout()
const router = useRouter()
const appStore = useAppStore()
const { userInfo } = storeToRefs(useUserStore())
const login: any = inject('login')
function goMine() {
    if (!userInfo.value?.id) {
        login()
        return
    }
    if (isMobile.value) {
        router.push({
            name: 'mine'
        })
    } else {
        emitter.emit('changeMineShow', true)
    }
}
</script>

<template>
    <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
        <div class="flex-1 flex-shrink-0 overflow-hidden">
            <n-button text @click="goMine">
                <UserAvatar />
            </n-button>
        </div>

        <HoverButton @click="show = true">
            <span class="text-xl text-[#4f555e] dark:text-white">
                <SvgIcon icon="ri:settings-4-line" />
            </span>
        </HoverButton>

        <Setting v-model:visible="show" />
    </footer>
</template>
