<script lang="ts" setup>
import { computed, nextTick } from 'vue'
import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
import { useAppStore, useChatStore } from '@/store'
import maskIcon from '@/assets/png-mianju.png'
import maskDarkIcon from '@/assets/png-mianju-dark.png'
import { useTheme } from '@/hooks/useTheme'
import { emitter } from '@/plugins'

const { isDark } = useTheme()

interface Props {
    usingContext: boolean
}

interface Emit {
    (ev: 'export'): void
    (ev: 'toggleUsingContext'): void
    (ev: 'goMine'): void
}

defineProps<Props>()

const emit = defineEmits<Emit>()

const appStore = useAppStore()
const chatStore = useChatStore()

const collapsed = computed(() => appStore.siderCollapsed)
const currentChatHistory = computed(() => chatStore.getChatHistoryByCurrentActive)

function handleUpdateCollapsed() {
    appStore.setSiderCollapsed(!collapsed.value)
}

function onScrollToTop() {
    const scrollRef = document.querySelector('#scrollRef')
    if (scrollRef) nextTick(() => (scrollRef.scrollTop = 0))
}

function handleExport() {
    emit('export')
}

function toggleUsingContext() {
    emit('toggleUsingContext')
}

function goMine() {
    emit('goMine')
}

function handleAdd() {
    emitter.emit('changeMask', true)
}
</script>

<template>
    <header
        class="sticky top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-[#0F1014] backdrop-blur"
    >
        <div class="relative flex items-center justify-between min-w-0 overflow-hidden h-14">
            <div class="flex items-center">
                <button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
                    <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
                    <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
                </button>
            </div>
            <h1
                class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
                @dblclick="onScrollToTop"
            >
                {{ currentChatHistory?.title ?? '' }}
            </h1>
            <div class="flex items-center space-x-2">
                <HoverButton @click="handleAdd">
                    <img class="w-[24px] h-[24px]" :src="isDark ? maskDarkIcon : maskIcon" alt="" />
                </HoverButton>
                <HoverButton @click="toggleUsingContext">
                    <span class="text-[24px]" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
                        <SvgIcon icon="ri:chat-history-line" />
                    </span>
                </HoverButton>

                <HoverButton @click="handleExport">
                    <span class="text-[24px] text-[#4f555e] dark:text-white">
                        <SvgIcon icon="ri:download-2-line" />
                    </span>
                </HoverButton>

                <HoverButton @click="goMine"> <user-avatar :avatarType="24" onlyAvatar></user-avatar> </HoverButton>
            </div>
        </div>
    </header>
</template>
