<template>
    <div class="mt-4">
        <div v-if="handouts.data[0]">
            <div class="flex justify-between items-center px-1">
                <MaghaleSecondTitle title="دست‌نوشته‌ها" />
                <NuxtLink :to="useRuntimeConfig().public.router.HandoutAdd">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="size-5 text-zinc-950 dark:text-white">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                </NuxtLink>
            </div>
            <HandoutTile v-for="instance in handouts.data" :key="instance.id" :instance="instance" />
            <!-- fold button -->
            <div class="flex justify-center mt-4 gap-4">
                <button v-if="down == 1" type="button" @click="unfold"
                    class=" text-zinc-950 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>
                <button v-if="down == 2" type="button" @click="getHandouts()"
                    class=" text-zinc-950 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>
                <button v-if="up" type="button" @click="fold" class=" text-zinc-950 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 18.75 7.5-7.5 7.5 7.5" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5" />
                    </svg>
                </button>
            </div>
        </div>
        <div v-else>
            <NuxtLink :to="useRuntimeConfig().public.router.HandoutAdd"
                class="flex relative items-center justify-center p-0.5 overflow-hidden text-sm font-medium text-zinc-950 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
                <span
                    class="relative w-40 text-xs text-center px-5 py-1 transition-all ease-in duration-75 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
                    افزودن دست‌نوشته‌
                </span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-5 text-zinc-950 dark:text-white">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                </svg>
            </NuxtLink>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios'
import { useMaghaleStore } from '~/store'
const store = useMaghaleStore()
const id = store.activity.id
const instancesData = reactive({ data: {} })
const handouts = reactive({ data: [] })
const down = ref(0)
const up = ref(false)

getHandouts(true)

async function getHandouts(init = false) {
    let url = ''
    if (instancesData.data.next) {
        url = instancesData.data.next
    } else if (store.isAuthenticated) {
        url = useRuntimeConfig().public.BaseUrl + `maghale/activity_handouts_by_user/?pk=${id}`
    } else {
        url = useRuntimeConfig().public.BaseUrl + `maghale/activity_handouts/?pk=${id}`
    }
    await axios.get(url)
        .then((r) => {
            instancesData.data = r.data
            if (init && instancesData.data.results.length > 0) {
                down.value = 1
                handouts.data.push(r.data.results[0])
            }
            if (!init) {
                handouts.data = handouts.data.concat(r.data.results)
                r.data.next ? down.value = 2 : down.value = 0
            }
        })
}
// functions
async function unfold() {
    instancesData.data.next ? down.value = 2 : down.value = 0
    up.value = true
    handouts.data = instancesData.data.results
}
async function fold() {
    down.value = 1
    up.value = false
    instancesData.data.results = handouts.data
    handouts.data = [handouts.data[0]]
}
</script>