<template>
    <UModal
        :model-value="!id ? $isLibraryCreateOpen : updateVisible"
        @update:modelValue="handleCloseModal"
        :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" v-if="!id">创建合集</div>
                    <div class="text-xl" v-else>更新合集</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
                        v-if="!id"
                        size="md"
                        label="创建"
                        :loading="loading"
                        :disabled="!title"
                        @click="handleCreate"
                    />
                    <UButton
                        v-else
                        size="md"
                        label="更新"
                        :loading="loading"
                        :disabled="!title"
                        @click="handleUpdate"
                    />
                </div>
            </template>
        </UCard>
    </UModal>
</template>
<script setup>
const { $isLibraryCreateOpen, $collection } = storeToRefs(useLibraryStore())
const { $closeLibraryCreate, $getCollection } = useLibraryStore()
const { setOrUpdateCollection } = useCollectionRequest()
const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    }
})
const updateVisible = ref(false)
const title = ref('')
const description = ref('')
const loading = ref(false)
function handleClose () {
    if (!props.id) $closeLibraryCreate()
    else updateVisible.value = false
}
async function handleCreate () {
    if (loading.value) return
    loading.value = true
    const { error } = await setOrUpdateCollection({
        name: title.value,
        description: description.value
    })
    loading.value = false
    if (error.value) return
    $closeLibraryCreate()
    $getCollection()
}
function handleCloseModal () {
    if (!props.id) $isLibraryCreateOpen.value = false
    else updateVisible.value = false
}
async function handleUpdate () {
    if (loading.value) return
    loading.value = true
    const { error } = await setOrUpdateCollection({
        id: Number(props.id),
        name: title.value,
        description: description.value
    })
    loading.value = false
    if (error.value) return
    handleCloseModal()
    $getCollection()
}
function handleFillInfo () {
    const collection =$collection.value
    const id = Number(props.id)
    const { name, description:currentDes } = collection.find(item => item.id === id)
    if (name) {
        title.value = name
        description.value = currentDes 
    }
}
function openUpdate () {
    updateVisible.value = true
    // todo 获取合集数据
    if (props.id) {
        handleFillInfo()
    }
}
defineExpose({
    openUpdate
})
</script>
