<template>
    <div class="mt-8">
        <MaghaleSecondTitle title="نویسنده‌ها" />
        <div class="mt-2">
            <ul>
                <li v-for="author in authors" :key="author.id" class="mt-1">
                    <button type="button" @click="removeAuthor(author.id)" class="bg-blue-100 w-auto text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5
                                    rounded-sm dark:bg-blue-900 dark:text-blue-300">
                        {{ author.get_title }} </button>
                </li>
            </ul>
        </div>
        <form @submit.prevent="submit" class="mt-4">
            <label for="title" class="block mb-2 font-medium text-zinc-900 dark:text-white">افزودن نویسنده</label>
            <input v-model="activity.title" type="text" id="title" @input="fetchClosestBooks" autocomplete="off"
                class="shadow-sm mt-2 bg-zinc-50 border border-zinc-300 text-zinc-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"
                required />
            <div v-if="suggestions.length" class="mt-2">
                <ul>
                    <li v-for="author in suggestions" :key="author.id">
                        <button type="button" @click="setAuthor(author)" class="bg-green-100 w-auto text-green-800 text-xs font-medium me-2 px-2.5 py-0.5
                                    rounded-sm dark:bg-green-900 dark:text-green-300">
                            {{ author.get_title }} </button>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</template>

<script setup>
import axios from 'axios';
import { useMaghaleStore } from '~/store'

const store = useMaghaleStore()
const id = useRoute().params.id

// get authors
const authors = ref([])
async function getBookAuthors(pk) {
    await axios.get(useRuntimeConfig().public.BaseUrl + `authors/book_authors/${id}`)
        .then((r) => {
            authors.value = r.data
        })
}
// init
getBookAuthors()
// submit
const form = reactive({
})
const activity = reactive({
    title: '',
})
async function submit() {
    await axios
        .post(useRuntimeConfig().public.BaseUrl + 'maghale/activities/', activity)
        .then((r) => {
            form.activity = r.data.id
            axios.post(useRuntimeConfig().public.BaseUrl + 'authors/authors/', form)
                .then((rr) => {
                    store.setAuthorId(rr.data.id)
                    setAuthor({id: rr.data.id, get_title: activity.title})
                })
        })
}
const suggestions = ref([]);
const fetchClosestBooks = async () => {
    if (activity.title.length < 2) return;
    await axios.post(useRuntimeConfig().public.BaseUrl + 'authors/search/', { title: activity.title })
        .then((r) => {
            suggestions.value = r.data
        })
};
async function setAuthor(obj) {
    await axios.post(useRuntimeConfig().public.BaseUrl + `books/add_author/`, { book: id, author: obj.id })
        .then(() => {
            authors.value.push(obj)
            activity.title = ''
            suggestions.value = []
        })
}
async function removeAuthor(pk) {
    await axios.post(useRuntimeConfig().public.BaseUrl + `books/remove_author/`, { book: id, author: pk })
        .then(() => {
            authors.value = authors.value.filter(x => x.id != pk)
        })
}
</script>