<template>
    <MaghaleSecondTitle title="نظرات" class="mt-4"/>

    <form @submit.prevent="submit" class="mt-4">
        <label for="chat" class="sr-only">نظر شما</label>
        <div class="flex items-center p-1 rounded-lg bg-zinc-50 dark:bg-zinc-950">
            <button type="button"
                class="p-2 text-zinc-500 rounded-lg cursor-pointer hover:text-zinc-950 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-zinc-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-zinc-950 bg-white rounded-lg border border-zinc-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="نظر شما ..."></textarea>
            <button type="submit" :disabled="form.text.length < 2"
                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-zinc-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-zinc-200 dark:border-zinc-700 m-4">
        <li v-for="instance in instances.data" :key="instance.id">
            <CommentTile :instance="instance"/>
        </li>
    </ol>
</template>

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

const store = useMaghaleStore()
const id = store.activity.id
const page = ref(1)
const instances = reactive({ data: [] })
const form = reactive({
    activity: id,
    text: ''
})

get_instances()

async function get_instances() {
    if (store.isAuthenticated) {
        await axios.get(`${useRuntimeConfig().public.BaseUrl}maghale/activity_comments_by_user/?pk=${id}`)
            .then((r) => {
                instances.data = r.data.results
            })
    } else {
        await axios.get(`${useRuntimeConfig().public.BaseUrl}maghale/activity_comments/${id}/`)
            .then((r) => {
                instances.data = r.data.results
            })
    }
}

async function submit() {
    axios.defaults.headers.common['Authorization'] = store.token
    await axios
        .post(useRuntimeConfig().public.BaseUrl + 'maghale/comments/', form)
        .then((r) => {
            const new_comment = r.data
            new_comment.user = {
                get_title: store.me.get_title,
                get_image: store.me.get_image,
            }
            instances.data.unshift(new_comment)
            form.text = ''
        })
}


</script>