<script lang="ts" setup>
	import { Form as veeForm, Field as veeField, useForm } from "vee-validate";
	import { IReview } from "@models/stories/review";
	import { comment } from "@client/editorConfig";
	import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
	const props = defineProps<{ review: IReview; story: SingleChapterResult }>();
	const review = toRef(props.review);
	const story = toRef(props.story);
	const { data } = useAuth();
	const isCommentAuthor = computed(() => {
		return data?.value?.user?._id === props.review.author._id;
	});
	const isAuthor = computed(() => {
		return props.story.author._id === data?.value?.user?._id;
	});
	const replyFormVisible = ref<boolean>(false);
	const isEditing = ref<boolean>(false);
	const editSubmit = async (values) => {
		const { data } = await useApiFetch<any>(`/review/${props.review._id}`, {
			method: "put",
			body: values,
		});
		review.value.text = data.value.data.text;
		isEditing.value = false;
	};

	const replySubmit = async (values) => {
		const { data } = await useApiFetch<any>(`/review/${props.review._id}/reply`, {
			method: "post",
			body: values,
		});
		review.value.replies.push(data.value.data);
		replyFormVisible.value = false;
	};

	const reallyDelete = async () => {
		await useApiFetch(`/review/${props.review._id}`, {
			method: "delete",
		});
	};

	// const { handleSubmit } = useForm()
</script>

<template>
	<a-comment>
		<template #actions>
			<div v-if="!!data?.user" class="review-actions">
				<a-button v-if="isCommentAuthor" @click="() => (isEditing = !isEditing)"> Edit </a-button>
				<a-popconfirm
					title="Are you sure you want to permanently delete this review?"
					ok-text="Yes"
					cancel-text="Never mind"
					@confirm="reallyDelete"
					v-if="isCommentAuthor || isAuthor"
				>
					<a-button> Delete </a-button>
				</a-popconfirm>
				<a-button v-if="isAuthor" type="primary" @click="() => (replyFormVisible = !replyFormVisible)"> Reply </a-button>
			</div>
		</template>
		<template #author>
			<b style="display: flex">
				<span v-if="review.replyingTo == null">Review by&nbsp;</span>
				<span v-else> Response from&nbsp; </span>
				<nuxt-link :to="`/user/${review.author._id}`">
					{{ review.author.username }}
				</nuxt-link>
			</b>
		</template>
		<template #content>
			<div>
				<vee-form @submit="editSubmit" v-if="isEditing">
					<vee-field name="content" v-slot="{ value, field, errorMessage }">
						<base-editor :val="review.text" :width="150" label="" :name="field.name" :init="comment" />
					</vee-field>
					<a-button type="primary" html-type="submit"> Edit review </a-button>
				</vee-form>
				<div v-else v-html="review.text" />
				<vee-form @submit="replySubmit" v-if="replyFormVisible">
					<vee-field name="content" v-slot="{ value, field, errorMessage }">
						<base-editor :width="150" label="" :name="field.name" :init="comment" />
					</vee-field>
					<a-button type="primary" html-type="submit"> Post response </a-button>
				</vee-form>
			</div>
		</template>
		<div v-for="reply in review.replies">
			<single-review :review="reply" :story="story" />
		</div>
	</a-comment>
</template>
<style scoped>
	.review-actions > * + * {
		margin-left: 0.4em;
	}
</style>