<script setup lang="ts">
// import

import useGetComments from "~/composables/api/product/useGetComments";
import useCreateComment from "~/composables/api/product/useCreateComment";
import { useAuth } from "~/composables/api/auth/useAuth";

// state

const route = useRoute();

const id = route.params.id as string | undefined;
const page = ref(1);

const { token } = useAuth();
const userComment = ref("");

const { data: comments, refetch: refetchComments } = useGetComments(id, page);
const { mutateAsync: createComment, isPending: isCreateCommentPending } =
    useCreateComment(id);

// methods

const submitComment = async () => {
    if (userComment.value.length > 3) {
        await createComment({
            content: userComment.value
        });

        userComment.value = "";

        await refetchComments();
    }
};
</script>

<template>
    <section class="bg-slate-50">
        <div class="flex relative gap-8 my-42 container max-lg:flex-col">
            <div
                class="sticky top-0 flex flex-col gap-6 lg:min-w-[400px] h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
            >
                <h3 class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">نظرات کاربران</h3>
                <div class="flex flex-col gap-2">
                    <Rating :rate="2" />
                    <span class="typo-p-sm">
                        بر اساس {{ comments?.count }} نظر
                    </span>
                </div>
                <form
                    @submit.prevent="submitComment"
                    class="flex flex-col gap-6"
                >
                    <textarea
                        :disabled="!token"
                        class="w-full min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200"
                        v-model="userComment"
                        placeholder="نظر خود را بنویسید..."
                    />
                    <Button
                        v-if="token"
                        type="submit"
                        class="rounded-full w-full"
                        :loading="isCreateCommentPending"
                        :disabled="isCreateCommentPending"
                    >
                        نظر بنویسید
                    </Button>
                    <NuxtLink v-else to="/signin">
                        <Button type="button" class="rounded-full w-full">
                            وارد شوید
                        </Button>
                    </NuxtLink>
                </form>
            </div>
            <div class="flex flex-col gap-8 w-full">
                <Comment
                    v-for="comment in comments!.results"
                    :key="comment.id"
                    title=""
                    :content="comment.content"
                    :date="comment.timestamp"
                    :username="'منصور مرزبان'"
                />
                <div class="flex items-center justify-center w-full">
                    <Pagination
                        :total="comments!.count"
                        :items="comments!.results.map((item, i) => ({ type: 'page', value: i }))"
                    />
                </div>
            </div>
        </div>
    </section>
</template>
