<template>
    <div class="mt-8">
        <MaghaleSecondTitle title="بخش‌ها" />
        <div class="mt-2">
            <ul>
                <li v-for="section, index in sections" :key="section.id" class="mt-1">
                    <div class="flex items-center space-x-1">
                        <NuxtLink :to="useRuntimeConfig().public.router.Chapter + section.id" class="bg-blue-100 w-auto text-blue-800 text-xs font-medium me-2 p-1
                                        rounded-sm dark:bg-blue-900 dark:text-blue-300">
                            {{ section.get_title }} </NuxtLink>
                        <button @click="up(index)" class="text-zinc-700 dark:text-zinc-100">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
                            </svg>
                        </button>
                        <button @click="down(index)" class="text-zinc-700 dark:text-zinc-100">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
                            </svg>
                        </button>
                        <button @click="deleteChapter(section.activity)" class="text-zinc-700 dark:text-zinc-100">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                            </svg>
                        </button>
                    </div>
                </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"
                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 />
        </form>
    </div>
</template>

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

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

// get sections
const sections = ref([])
async function getBookChapters() {
    await axios.get(useRuntimeConfig().public.BaseUrl + `books/chapter_sections_title/${id}`)
        .then((r) => {
            sections.value = r.data
        })
}
// init
getBookChapters()
// submit
const form = reactive({
    chapter: id
})
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 + 'books/sections/', form)
                .then((rr) => {
                    store.setChapterId(rr.data.id)
                    sections.value.push({ id: rr.data.id, get_title: activity.title })
                    activity.title = ''
                })
        })
}
async function deleteChapter(pk) {
    if (confirm('از حذف فصل مطمئن هستید؟')) {
        await axios.delete(useRuntimeConfig().public.BaseUrl + `maghale/activities/${pk}/`)
            .then(() => {
                sections.value = sections.value.filter(x => x.activity != pk)
            })
    }
}
const { $arrayUtils } = useNuxtApp()
function up(index) {
    axios.get(useRuntimeConfig().public.BaseUrl + `books/increase_section/${sections.value[index].id}`)
        .then(() => {
            sections.value = $arrayUtils.swapWithPrevious(sections.value, index)
        })
}
function down(index) {
    axios.get(useRuntimeConfig().public.BaseUrl + `books/decrease_section/${sections.value[index].id}`)
        .then(() => {
            sections.value = $arrayUtils.swapWithNext(sections.value, index)
        })
}
</script>