<template>
    <div class="flex flex-col w-full items-center sticky top-0 bg-white dark:bg-black z-10">
        <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6">
            <div class="flex justify-between items-center gap-4">
                <div class="flex gap-4">
                    <IMenuSider />
                    <div class="flex flex-shrink-0 items-center text-xl gap-2" v-if="!collect">
                        <UIcon name="i-heroicons-rectangle-stack-20-solid" />
                        <div>主题</div>
                    </div>
                    <template v-else>
                        <UButton
                            icon="i-heroicons-chevron-left"
                            color="gray"
                            variant="ghost"
                            to="/library"
                        />
                        <div class="flex items-center text-xl gap-2">
                            <UIcon name="i-heroicons-squares-2x2" />
                            <div>{{ collect }}</div>
                            <UBadge color="gray" variant="soft" :label="count" />
                        </div>
                    </template>
                </div>
                <div class="flex flex-grow justify-end items-center gap-4">
                    <div class="flex">
                        <IActionCollect :id="collectId" v-if="collect" />
                    </div>
                    <div class="flex" v-if="!collect">
                        <UInput
                            name="queryInput"
                            :ui="{ icon: { trailing: { pointer: '' } } }"
                            v-model="searchQuery"
                            :loading="searchLoading"
                            icon="i-heroicons-magnifying-glass-20-solid"
                            placeholder="搜索你的主题..."
                            size="md"
                        >
                            <template #trailing>
                                <UButton
                                    v-show="searchQuery !== ''"
                                    color="gray"
                                    variant="link"
                                    icon="i-heroicons-x-mark-20-solid"
                                    :padded="false"
                                    @click="handleClear"
                                />
                            </template>
                        </UInput>
                    </div>
                </div>
            </div>
            <div v-if="description" class="text-gray-500 ml-12 mt-2">{{ description }}</div>
        </div>
        <UDivider />
        <div v-if="showTabs" class="w-full p-6 block lg:hidden">
            <UTabs :model-value="tab" @update:modelValue="handleChangeTab" :items="tabs" />
        </div>
    </div>
</template>
<script setup>
defineProps({
    collect: {
        type: String,
        default: ''
    },
    description: {
        type: String,
        default: ''
    },
    count: {
        type: Number,
        default: 0
    },
    collectId: {
        type: [String, Number],
        default: ''
    },
    showTabs: {
        type: Boolean,
        default: false
    },
    tab: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['search', 'clear', 'change-tab'])
const searchQuery = ref('')
const searchLoading = ref(false)
defineShortcuts({
    enter: {
        usingInput: 'queryInput',
        handler: async () => {
            searchLoading.value = true
            const { data } = await useRequest(`/v1/chat/completion/list?keyword=${searchQuery.value}`)
            searchLoading.value = false
            emit('search', data.value.data)
        }
    }
})
function handleClear () {
    searchQuery.value = ''
    emit('clear')
}
const tabs = [
    {
        label: '全部主题',
        icon: 'i-heroicons-square-3-stack-3d'
    },
    {
        label: '合集'
    }
]
function handleChangeTab (index) {
    emit('change-tab', index)
}
</script>
