<template>
    <div class=" mt-4 ">
        <div class="flex items-center mb-4 justify-end">
            <div class="text-xs">
                <button id="dropdownRadioButton" data-dropdown-toggle="dropdownRadio"
                    class="inline-flex items-center text-zinc-500 ml-2 bg-white border border-zinc-300 focus:outline-none hover:bg-zinc-100 focus:ring-4 focus:ring-zinc-100 font-medium rounded-lg px-3 py-1.5 dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:focus:ring-zinc-700"
                    type="button">
                    <svg class="w-3 h-3 text-zinc-500 dark:text-zinc-400 me-3" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z" />
                    </svg>
                    مرتب‌سازی
                    <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 4 4 4-4" />
                    </svg>
                </button>
                <!-- Dropdown menu -->
                <div id="dropdownRadio"
                    class="z-10 hidden w-48 bg-white divide-y divide-zinc-100 rounded-lg shadow dark:bg-zinc-700 dark:divide-zinc-600"
                    data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top"
                    style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(522.5px, 3847.5px, 0px);">
                    <ul class="p-3 space-y-1 text-zinc-700 dark:text-zinc-200" aria-labelledby="dropdownRadioButton">
                        <li>
                            <div class="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
                                <input id="title" type="radio" value="title" name="filter-radio" v-model="ordering"
                                    @change="getActivities"
                                    class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                                <label for="title"
                                    class="w-full ms-2 font-medium text-zinc-900 rounded dark:text-zinc-300">عنوان</label>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
                                <input id="-date" type="radio" value="-date" v-model="ordering" @change="getActivities"
                                    name="filter-radio"
                                    class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                                <label for="-date"
                                    class="w-full ms-2 font-medium text-zinc-900 rounded dark:text-zinc-300">جدیدترین</label>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
                                <input id="date" type="radio" value="date" v-model="ordering" @change="getActivities"
                                    name="filter-radio"
                                    class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600">
                                <label for="date"
                                    class="w-full ms-2 font-medium text-zinc-900 rounded dark:text-zinc-300">قدیمی‌ترین</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <ol class="relative border-s ms-4 border-zinc-200 dark:border-zinc-700 mt-4">
            <li v-if="activities.data.length" v-for="instance in activities.data" :key="instance.id">
                <ActivityKeyword v-if="instance.type == 'keyword'" :instance="instance" />
                <ActivityBook v-if="instance.type == 'book'" :instance="instance" />
                <ActivitySection v-if="instance.type == 'section'" :instance="instance" />
                <ActivityChapter v-if="instance.type == 'chapter'" :instance="instance" />
                <ActivityIdea v-if="instance.type == 'idea'" :instance="instance" />
                <ActivityPaper v-if="instance.type == 'paper'" :instance="instance" />
                <ActivityCode v-if="instance.type == 'code'" :instance="instance" />
                <ActivityHandout v-if="instance.type == 'handout'" :instance="instance" />
            </li>
        </ol>

        <div class="flex justify-center mt-4">
            <button v-if="activities.next" type="button" @click="next"
                class=" text-zinc-900 dark:text-white animate-bounce">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6 ">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5" />
                </svg>
            </button>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios'
const ordering = ref('create_time')
// get activities
const activities = reactive({ data: [] })
async function getActivities(url) {
    await axios
        .get(url)
        .then((r) => {
            activities.data = activities.data.concat(r.data.results)
            activities.next = r.data.next
        })
}
// init
getActivities(`${useRuntimeConfig().public.BaseUrl}maghale/get_activities/?page=1&ordering=${ordering.value}`)
// functions
function next() {
    getActivities(activities.next)
}
</script>