<template>
    <div class="mb-4 ms-6">
        <div>
            <span
                class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 -start-3 rounded-full dark:bg-blue-950">
                <img class="rounded-full shadow-lg" :src="useRuntimeConfig().public.MediaUrl + instance.user.get_image"
                    alt="Thomas Lean image" />
            </span>
            <div class="flex">

                <div
                    class="p-1 bg-white border border-cyen-200 rounded-lg shadow-sm dark:bg-cyen-950 dark:border-cyen-600">
                    <div class="flex items-center justify-between mb-1">
                        <div class="font-normal text-cyen-500 lex dark:text-cyen-300">{{ instance.user.get_title }}
                        </div>
                        <time class="mb-1 font-extralight text-xs text-cyen-400 mr-2">{{
                            toPersianNumbers(instance.persian_date) }}</time>
                    </div>
                    <div class="flex items-center">
                        <p class="mb-1 font-extralight text-xs text-cyen-400">{{ instance.activity.title }}</p>
                        <button v-if="instance.activity.content" type="button" class="text-cyen-700 dark:text-white">
                            <svg @click="go_to_activity_page(instance.activity)" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                class="size-4 mr-1">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z" />
                            </svg>
                        </button>
                    </div>
                    <div
                        class="p-1 text-xs italic font-normal text-cyen-500 border border-cyen-200 rounded-lg bg-cyen-50 dark:bg-cyen-800 dark:border-cyen-500 dark:text-cyen-300">
                        {{ instance.text }}</div>
                </div>
                <div class="flex flex-col items-center">
                    <button id="dropdownMenuIconButton" :data-dropdown-toggle="'id-' + instance.id"
                        data-dropdown-placement="bottom-start"
                        class="inline-flex self-center items-center p-2 m-2 font-medium text-center text-cyen-950 bg-white rounded-lg hover:bg-cyen-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-cyen-50 dark:bg-cyen-950 dark:hover:bg-cyen-800 dark:focus:ring-cyen-600"
                        type="button">
                        <svg class="w-4 h-4 text-cyen-500 dark:text-cyen-400" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
                            <path
                                d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
                        </svg>
                    </button>
                    <button type="button" @click="seenComment" class="flex -space-x-3 text-green-700">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                        </svg>
                        <svg v-if="instance.seen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="size-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                        </svg>
                    </button>

                </div>
                <div :id="'id-' + instance.id"
                    class="z-10 hidden bg-white divide-y divide-cyen-100 rounded-lg shadow w-40 dark:bg-cyen-700 dark:divide-cyen-600">
                    <ul class="py-2 text-cyen-700 dark:text-cyen-200" aria-labelledby="dropdownMenuIconButton">
                        <li>
                            <button @click="instance.reply = true"
                                class="block px-4 py-2 hover:bg-cyen-100 dark:hover:bg-cyen-600 dark:hover:text-white">پاسخ</button>
                        </li>
                        <li>
                            <a href="#"
                                class="block px-4 py-2 hover:bg-cyen-100 dark:hover:bg-cyen-600 dark:hover:text-white">گزارش</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <div>
            <form @submit.prevent="submit()" class="mt-2" v-if="instance.reply">
                <label for="chat" class="sr-only">پاسخ</label>
                <div class="flex items-center p-1 rounded-lg bg-cyen-50 dark:bg-cyen-950">
                    <button type="button"
                        class="p-2 text-cyen-500 rounded-lg cursor-pointer hover:text-cyen-950 hover:bg-cyen-100 dark:text-cyen-400 dark:hover:text-white dark:hover:bg-cyen-600">
                        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13.408 7.5h.01m-6.876 0h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM4.6 11a5.5 5.5 0 0 0 10.81 0H4.6Z" />
                        </svg>
                        <span class="sr-only">Add emoji</span>
                    </button>
                    <textarea id="chat" rows="1" v-model="form.text"
                        class="block mx-1 p-1 w-full text-sm text-cyen-950 bg-white rounded-lg border border-cyen-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-cyen-800 dark:border-cyen-600 dark:placeholder-cyen-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                        placeholder="پاسخ شما"></textarea>
                    <button type="submit"
                        class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-cyen-600">
                        <svg class="w-5 h-5 rotate-90 rtl:-rotate-90" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                            <path
                                d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z" />
                        </svg>
                        <span class="sr-only">Send message</span>
                    </button>
                </div>
            </form>

            <ol dir="rtl" class="relative border-s border-cyen-200 dark:border-cyen-700 m-4">
                <li v-for="instance2 in instance.replies" :key="instance2.id">
                    <ActivityReply :instance="instance2" />
                </li>
            </ol>
        </div>

    </div>
</template>

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

const { $toPersianNumbers } = useNuxtApp();
const toPersianNumbers = $toPersianNumbers;
const router = useRouter()

const props = defineProps(['instance'])
const instance = props.instance

onMounted(() => {
    useFlowbite(() => {
        initFlowbite();
    })
})

const store = useMaghaleStore()
const page = ref(1)
const form = reactive({})

async function submit() {
    form.comment = instance.id
    await axios
        .post(useRuntimeConfig().public.BaseUrl + 'maghale/replies/', form)
        .then((r) => {
            const new_reply = r.data
            new_reply.user = {
                get_title: store.me.get_title,
                image: store.me.get_image,
            }
            instance.replies.push(new_reply)
            instance.reply = false
            form.text = ''
        })
}

async function seenComment() {
    await axios
        .patch(useRuntimeConfig().public.BaseUrl + `maghale/comments/${instance.id}/`, {seen: true})
        .then((r) => {
            instance.seen = true
        })
}

function go_to_activity_page(obj) {
    switch (obj.type) {
        case 'field':
            store.setField({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.Field + obj.content)
            break
        case 'handout':
            store.setHandout({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.Handout + obj.content)
            break
        case 'link':
            store.setLink({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.Link + obj.content)
            break
        case 'university':
            store.setUniversity({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.University + obj.content)
            break
        case 'skill':
            store.setSkill({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.Skill + obj.content)
            break
        case 'news':
            store.setNews({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.News + obj.content)
            break
        case 'city':
            store.setCity({ get_title: obj.title, id: obj.content, activity: { id: obj.id } })
            router.push(useRuntimeConfig().public.router.City + obj.content)
            break
    }
}


</script>