<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 showMoreComments = ref(false);

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();
    }
};

// computed

const limitedComments = computed(() => {
    if (showMoreComments.value) {
        return comments.value?.results;
    }

    return comments.value?.results.slice(0, 3);
});
</script>

<template>
    <section
        v-if="!!comments"
        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-[125px] resize-none sm:min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
                        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 limitedComments"
                    :key="comment.id"
                    title=""
                    :content="comment.content"
                    :date="comment.timestamp"
                    :username="'منصور مرزبان'"
                />

                <div
                    v-if="comments.count > 0"
                    class="flex items-center justify-center w-full"
                >
                    <Pagination
                        v-if="showMoreComments"
                        :total="comments.count"
                        :items="comments.results.map((item, i) => ({ type: 'page', value: i }))"
                    />
                    <Button
                        v-else
                        type="button"
                        variant="primary"
                        @click="showMoreComments = !showMoreComments"
                        class="rounded-full px-8"
                        end-icon="bi:plus"
                    >
                        نمایش همه
                    </Button>
                </div>
                <div
                    v-else
                    class="h-[400px] lg:flex-grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
                >
                    <NuxtImg
                        src="/img/heymlz/heymlz-contact-us.gif"
                        class="w-[200px] lg:w-[300px] translate-y-[-25px]"
                    />
                    <span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>
                </div>
            </div>
        </div>
    </section>
</template>
