<template>
    <UModal v-model="$isLibraryCreateOpen" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
            <template #header>
                <div class="flex items-center justify-between">
                    <div class="text-xl">创建集合</div>
                    <UButton
                        leading-icon="i-heroicons-x-mark-20-solid"
                        color="gray"
                        variant="ghost"
                        @click="handleClose"
                    />
                </div>
            </template>
            <div class="flex flex-col gap-6">
                <div class="flex flex-col gap-1">
                    <div class="flex content-center items-center justify-between text-sm">
                        <label class="block font-medium text-gray-700 dark:text-gray-200">标题</label>
                    </div>
                    <UInput
                        v-model="title"
                        placeholder="集合标题"
                        autofocus
                    />
                </div>
                <div class="flex flex-col gap-1">
                    <div class="flex content-center items-center justify-between text-sm">
                        <label class="block font-medium text-gray-700 dark:text-gray-200">
                            描述
                            <span class="text-gray-400 dark:text-gray-100">（可选）</span>
                        </label>
                    </div>
                    <UTextarea
                        v-model="description"
                        placeholder="集合描述"
                    />
                </div>
            </div>
            <template #footer>
                <div class="flex justify-end">
                    <UButton
                        size="md"
                        label="创建"
                        :loading="loading"
                        :disabled="!title"
                        @click="handleCreate"
                    />
                </div>
            </template>
        </UCard>
    </UModal>
</template>
<script setup>
const { $isLibraryCreateOpen } = storeToRefs(useLibraryStore())
const { $closeLibraryCreate } = useLibraryStore()
const { setOrUpdateFavorites } = useCollectionRequest()
const title = ref('')
const description = ref('')
const loading = ref(false)
function handleClose () {
    $closeLibraryCreate()
}
async function handleCreate () {
    if (loading.value) return
    loading.value = true
    const { error } = await setOrUpdateFavorites({
        name: title.value,
        description: description.value
    })
    loading.value = false
    if (error.value) return
    $closeLibraryCreate()
}
</script>
