<template>
    <Panel :header="$t('پاسخ به نظرات')">
        <div v-for="item in data.comments" :key="item.id">
            <div class="card mb-8">
                <Panel toggleable>
                    <template #header>
                        <div class="flex items-center gap-2">
                            <Avatar v-if="item.createdBy.avatarMedia" :image="item.createdBy.avatarMedia" size="large" shape="circle" />
                            <Avatar v-else image="/src/assets/alt.png" size="large" shape="circle" />
                            <span v-if="item.createdBy.name" class="font-bold">{{item.createdBy.name}}</span>
                            <span v-else class="font-bold">کاربر بدون نام</span>
                       </div>
                    </template>
                    <template #footer>
                        <div class="flex flex-wrap items-center justify-between gap-4">
                            <div class="flex items-center gap-2">
                                <Button icon="pi pi-reply" rounded text @click="reply(item.id)"></Button>
                                <Tag v-if="item.replies.length === 0" icon="pi pi-times" class="gap-1" severity="danger" value="در انتظار پاسخ"></Tag>
                                <Tag v-else icon="pi pi-check" severity="success" class="gap-1" value="پاسخ داده شده"></Tag>
                            </div>
                            <span class="text-surface-500 dark:text-surface-400">{{ jDate(item.createdAt) }}</span>
                        </div>
                    </template>
                    <template #icons>
                        <Menu ref="menu" id="config_menu" :model="items" popup />
                    </template>
                    <p class="m-0">
                {{ item.text }}
                    </p>
                    <p v-for="answr in item.replies" :key="answr.id" class="border rounded-md ms-[60px] mt-2 p-2">{{answr.text}}</p>
                </Panel>
            </div>
        </div>
  
        <Textarea v-model="value" placeholder="پاسخ..." class="w-full" rows="5" />
        <div class="flex pt-4 justify-end">
          <Button
            :label="$t('send')"
            icon="pi pi-send"
            severity="success"
            :loading="saving"
         @click="sendReply"
          />
        </div>
      </Panel>

</template>





<script setup>
import { useToast } from "primevue/usetoast";
import { useRouter } from 'vue-router';
import Menu from 'primevue/menu';
import {jDate} from "@/utils/jDate";
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import {useProductsStore} from "@/stores/products";
import {useCommentStore} from "@/stores/courseComments"
const store = useProductsStore()
const commentStore = useCommentStore()
const route = useRoute()
const data = ref([])
const menu = ref(null);
const toast = useToast();
const replyTarget = ref(null)
const value = ref(null)
const reply = (id) =>{
    replyTarget.value = id
}
const sendReply = async() =>{
    if (replyTarget.value === null || replyTarget.value === '') {

    }
    if (value.value === null || value.value === '') {
    }
   const rep = await commentStore.reply(route.params.id, {
        text: value.value,
        parent: replyTarget.value
    })
}
const items = ref([
    {
        label: 'Refresh',
        icon: 'pi pi-refresh'
    },
    {
        label: 'Search',
        icon: 'pi pi-search'
    },
    {
        separator: true
    },
    {
        label: 'Delete',
        icon: 'pi pi-times'
    }
]);

watchEffect(async() => {
data.value = await store.edit(route.params.id)

})
</script>