<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"
                />
            </div>
            <div class="flex gap-2">
                <UButton
                    @click="handleOpenSelect" 
                    color="gray" variant="ghost" 
                    leading-icon="i-heroicons-plus-20-solid"
                    :label="$selectCollectionId.length > 0 ? '已收藏' : '收藏'"
                />
                <UPopover v-model:open="isShareOpen">
                    <UButton :leading-icon="isOpen ? 'i-heroicons-share-20-solid' : 'i-heroicons-lock-closed-20-solid'" @click="handleSetOpenState">分享</UButton>
                    <template #panel>
                        <div class="flex flex-col p-3 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 text-sm">
                                        <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 text-sm" :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 class="flex gap-1 items-center text-xs text-primary-500" v-if="isOpen">
                                <UIcon name="i-heroicons-clipboard-document-check" />
                                <span>链接已复制</span>
                            </div>
                        </div>
                    </template>
                </UPopover>
            </div>
        </div>
        <UDivider />
    </header>

</template>
<script setup>
const toast = useToast()
const route = useRoute()
const { $isSignIn } = storeToRefs(useUserStore())
const { $selectCollectionId } = storeToRefs(useLibraryStore())
const { $openLibraryCreate, $openLibrarySelect, $setSelectCollectionId } = useLibraryStore()
const { findRecordCollection } = useCollectionRequest()
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)
const isShareOpen = ref(false)

watch(()=> props.query, () => {
    editTitle.value = props.query
}, { immediate: true })
watch(() => props.isPublic, () => {
    isOpen.value = props.isPublic
}, { immediate: true })
function handleFocusTitle () {
    isEditTitle.value = true
}
function handleBlurTitle () {
    isEditTitle.value = false
    emits('update-query', editTitle.value)
}
async function handleUpdateOpenState (state) {
    const { data } = await useRequest(`/v1/chat/${route.params.id}/public/${state}`, { method: 'post' })
    if (data.value) isOpen.value = state
}
function handleCopyLink (url) {
    useCopyToClipboard().copy(url || window.location.href)
    toast.add({
        icon: 'i-heroicons-information-circle-20-solid',
        timeout: 2000,
        title: '链接已复制到剪贴板'
    })
}
async function handleSetOpenState() {
    if (isShareOpen.value) return
    if (!isOpen.value) {
        setTimeout(async () => {
            await handleUpdateOpenState(true)
            handleCopyLink()
        }, 200)
    } else {
        await handleUpdateOpenState(true)
        handleCopyLink()
    }
}
function handleOpenSelect () {
    $openLibrarySelect(route.params.id)
}
async function initData () {
    const { data, error } = await findRecordCollection(route.params.id)
    if (!error.value) {
        const ids = data.value.data.map(item => item.collection_id)
        console.log(`ids:`, ids)
        $setSelectCollectionId(ids)
    }
}
// 初始化登录的时候判断是否已收藏
if ($isSignIn.value) {
    await initData()
}
defineExpose({
    isOpen,
    handleUpdateOpenState,
    handleCopyLink
})
</script>