<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 + store.me.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">
                        <p class="mb-1 font-extralight text-xs text-cyen-400">{{ instance.comment.activity.title }}
                        </p>
                        <button v-if="instance.comment.activity.content" type="button"
                            class="text-cyen-700 dark:text-white">
                            <svg @click="go_to_activity_page(instance.comment.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.comment.text }}</div>
                </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>


        <ol dir="rtl" class="relative border-s border-cyen-200 dark:border-cyen-700 m-4">
            <li>
                <UserReply :instance="instance" />
            </li>
        </ol>

    </div>
</template>

<script setup>
import axios from 'axios'
import { useMaghaleStore } from '~/store'
import { onMounted } from 'vue'
const router = useRouter()
const props = defineProps(['instance'])
const instance = props.instance
onMounted(() => {
    useFlowbite(() => {
        initFlowbite();
    })
})
const store = useMaghaleStore()
const form = reactive({})
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>