<template>
    <div class="mr-6 mt-2">
        <span
            class="absolute flex items-center justify-center w-6 h-6 bg-cyen-100 -start-3 rounded-full dark:bg-cyen-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 text-xs 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 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="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-100">
                    {{ 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="seenReply" 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>
    </div>
</template>

<script setup>
import axios from 'axios';

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

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

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

</script>