<template>
    <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
        <div class="w-full p-2 justify-end sm:justify-between items-center flex">
            <div class="flex-grow justify-center items-center space-x-2 hidden sm:flex">
                <UTooltip text="点击修改标题" v-if="!isEditTitle">
                    <div @click="handleFocusTitle">{{ editTitle }}</div>
                </UTooltip>
                <UInput
                    v-else
                    ref="titleRef"
                    autofocus
                    :model-value="editTitle"
                    @blur="handleBlurTitle"
                />
                <span>/</span>
                <UButton color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
            </div>
            <div class="flex gap-2">
                <UButton v-if="SM" color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
                <UPopover>
                    <UButton leading-icon="i-heroicons-share-20-solid">分享</UButton>
                    <template #panel>
                        <div class="flex flex-col p-4 gap-2 min-w-72">
                            <div>访问权限</div>
                            <div class="flex flex-col border dark:border-gray-800 rounded">
                                <div
                                    class="flex flex-grow justify-between m-1 p-1 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                                    @click="handleUpdateOpenState(false)"
                                >
                                    <div class="flex-grow flex flex-col gap-1">
                                        <div class="flex items-center gap-1" :class="{ 'text-primary-500': !isOpen }">
                                            <UIcon name="i-heroicons-lock-closed-20-solid" />
                                            <span>私密</span>
                                        </div>
                                        <div class="text-xs text-gray-500">只有作者可以查看</div>
                                    </div>
                                    <div v-if="!isOpen">
                                        <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary-500 text-xl" />
                                    </div>
                                </div>
                                <UDivider />
                                <div
                                    class="flex flex-grow justify-between m-1 p-1 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                                    @click="handleUpdateOpenState(true)"
                                >
                                    <div class="flex-grow flex flex-col gap-1" :class="{ 'text-primary-500': isOpen }">
                                        <div class="flex items-center gap-1">
                                            <UIcon name="i-heroicons-share-20-solid" />
                                            <span>可分享的</span>
                                        </div>
                                        <div class="text-xs text-gray-500">任何持有链接的人都可以查看</div>
                                    </div>
                                    <div v-if="isOpen">
                                        <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary-500 text-xl" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </UPopover>
            </div>
        </div>
        <UDivider />
    </header>
</template>
<script setup>
const toast = useToast()
const route = useRoute()
const props = defineProps({
    query: String,
    isPublic: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update-query'])
const isEditTitle = ref(false)
const titleRef = ref(null)
const editTitle = ref('')
const isOpen = ref(false)

watch(()=> props.query, () => {
    editTitle.value = props.query
}, { immediate: true })
watch(() => props.isPublic, () => {
    isOpen.value = props.isPublic
})
function handleFocusTitle () {
    isEditTitle.value = true
}
function handleBlurTitle () {
    isEditTitle.value = false
    emits('update-query', editTitle.value)
}
async function handleShare () {
    const shareType = String(isOpen.value)
    const { error } = await useRequest(`/v1/chat/${route.params.id}/public/${shareType}`, { method: 'post' })
    if (!error.value && isOpen.value) {
        useCopyToClipboard().copy(window.location.href)
        toast.add({
            icon: 'i-heroicons-information-circle-20-solid',
            timeout: 2000,
            title: '链接已复制到剪贴板'
        })
    }    
}
function handleUpdateOpenState (state) {
    isOpen.value = state
    handleShare()
}
</script>