<script setup lang="ts">
	import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
	import { Grid, 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";
	import { IUser } from "@models/user";
	import { recordView } from "@client/science";

	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(rtr);
	let dark = inject<boolean>("dark");
	const and = computed(() => {
		return story.value.coAuthor ? ` and ${story.value.coAuthor.username}` : "";
	});
	useHead({
		title: `"${story.value.title}" by ${story.value.author.username}${and.value}`,
	});
	await recordView(story.value._id!);
	const bp = Grid.useBreakpoint();
</script>
<template>
	<a-typography-title>
		{{ story?.title }}
	</a-typography-title>
	<story-info />
	<div>
		<a-card
			:style="{
				backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
				color: '#fff',
			}"
			class="maybe-flow-root"
		>
			<div>
				<a-typography-title :level="2"> Disclaimer </a-typography-title>
				<a-divider style="background-color: #fff" />
				{{ (story.author as IUser).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">
			<div>
				<a-typography-title :level="4">Author's notes:</a-typography-title>
				<div v-html="story?.currentChapter.notes" />
			</div>
			<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>
<style>
	.flow-root {
		display: flow-root;
	}
	.maybe-flow-root {
		display: block;
	}
	@media (min-width: 968px) {
		.maybe-flow-root {
			display: flow-root;
		}
	}
</style>