<script lang="ts" setup>
	import { LabeledValue } from "ant-design-vue/es/select";
	import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";

	const { params } = useRoute();
	const cidx = parseInt(params.cidx as string);
	const story = inject<SingleChapterResult | null>("story")!;
	const opts = ref<LabeledValue[]>(
		story!.chapterNames.map(
			(s, i) =>
				({
					label: s,
					value: i + 1,
				}) as LabeledValue,
		),
	);
	const onChange = (v) => {
		console.log("SELECT", v);
		navigateTo(`/story/${story._id}/${v as LabeledValue}`);
	};
</script>

<template>
	<div style="display: flow-root">
		<a-select :value="opts[cidx - 1]" @select="onChange" :options="opts" />
	</div>
</template>

<style scoped>
	.ant-select {
		width: 100%;
	}
</style>