<script setup lang="ts">
	import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
	import { theme } from "ant-design-vue";
	import { storyMiddleware } from "@client/middleware";
	import forChapter from "~/components/reviews/forChapter.vue";
	import storyInfo from "~/components/story/view/storyInfo.vue";
	import chapterPicker from "~/components/story/view/chapterPicker.vue";

	const { useToken } = theme;
	const { token } = useToken();
	definePageMeta({
		middleware: [storyMiddleware],
	});
	const rtr = useRoute();
	const { data: story, error } = await useApiFetch<SingleChapterResult>(
		`/story/${rtr.params.id}/${rtr.params.cidx}`,
	);
	provide<SingleChapterResult | null>("story", story.value);
	console.log("storyyy", story.value?.currentChapter);
	console.log(rtr);
	let dark = inject<boolean>("dark");
	useHead({
		title: `"${story.value.title}" by ${story.value.author.username}`,
	});
</script>
<template>
	<a-typography-title>
		{{ story?.title }}
	</a-typography-title>
	<story-info />
	<div>
		<a-card
			:style="{
				backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
				display: 'flow-root',
				color: '#fff',
			}"
		>
			<div>
				<a-typography-title :level="2"> Disclaimer </a-typography-title>
				<a-divider style="background-color: #fff" />
				{{ story.author.profile.disclaimer }}
			</div>
		</a-card>
		<a-typography-title :level="3">
			{{ story.currentChapter.title }}
		</a-typography-title>
		<chapter-picker v-if="story.totalChapters > 1" />
		<div style="display: flow-root">
			<a-divider />
		</div>
		<div v-html="story?.currentChapter.text"></div>
		<a-divider style="background-color: #fff" />
		<a-button-group size="large" v-if="story.totalChapters > 1">
			<a-button
				v-if="parseInt(rtr.params.cidx as string) > 1"
				@click="() => navigateTo(`/story/${rtr.params.id}/1`)"
			>
				First
			</a-button>
			<a-button
				v-if="parseInt(rtr.params.cidx as string) > 1"
				@click="
					() =>
						navigateTo(
							`/story/${rtr.params.id}/${
								parseInt(rtr.params.cidx as string) - 1
							}`,
						)
				"
			>
				Previous
			</a-button>
			<a-button
				v-if="
					parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
				"
				@click="
					() =>
						navigateTo(
							`/story/${rtr.params.id}/${
								parseInt(rtr.params.cidx as string) + 1
							}`,
						)
				"
			>
				Next
			</a-button>
			<a-button
				@click="
					() =>
						navigateTo(`/story/${rtr.params.id}/${story.chapterNames.length}`)
				"
				v-if="
					parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
				"
			>
				Last
			</a-button>
		</a-button-group>
		<a-typography-title style="text-align: center" :level="2">
			Reviews
		</a-typography-title>
		<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
	</div>
</template>