<script setup lang="ts">
	import {
		Form as VeeForm,
		Field,
		useForm,
		useField,
		ErrorMessage,
	} from "vee-validate";
	import { NamePath } from "ant-design-vue/es/form/interface";
	import { FormChapter } from "~/lib/client/types/form/story";

	import { story, bare } from "~/lib/client/editorConfig";
	import elBands from "../atoms/bands.vue";
	import genre from "../atoms/genre.vue";
	import elCharacters from "../atoms/characters.vue";
	import elPairings from "../atoms/pairings.vue";
	import uploadOrPaste from "./uploadOrPaste.vue";
	// import test1 from

	let { name, data } = defineProps<{
		name: NamePath;
		data: FormChapter;
	}>();
	let acData = toRef(data);
	let { data: _bands } = await useApiFetch("/band/all");
	let bands = ref(_bands);
	provide("curName", name + ".");
	provide("bandlist", bands);
	const selectedBands = ref(data.bands || []);
	const updateBands = (val) => {
		selectedBands.value = val;
		// data.value.bands = val;
	};
	provide("selectedBands", {
		sb: selectedBands,
		updateBands,
	});
	const wrapc = { span: 12 };
</script>
<template>
	<div>
		<a-row :gutter="[10, 0]">
			<a-col :span="12">
				<Field
					:name="name + '.chapterTitle'"
					v-slot="{ value, field, errorMessage }"
				>
					<a-form-item
						:name="[field.name]"
						label="Chapter title"
						:help="errorMessage"
						:status="!!errorMessage ? 'error' : undefined"
					>
						<a-input v-bind="field" />
					</a-form-item>
				</Field>
			</a-col>
			<a-col :span="12">
				<el-bands />
			</a-col>
		</a-row>
		<a-row :gutter="[10, 0]">
			<a-col :span="12">
				<base-editor
					v-model:val="acData.summary"
					:name="name + '.summary'"
					:wrap-col="wrapc"
					label="Summary"
					:init="bare"
				/>
			</a-col>
			<a-col :span="12">
				<base-editor
					v-model:val="acData.notes"
					:name="name + '.notes'"
					:wrap-col="wrapc"
					label="Author's notes"
					:init="bare"
				/>
			</a-col>
		</a-row>
		<a-row :gutter="[10, 0]">
			<a-col :span="12">
				<el-characters />
			</a-col>
			<a-col :span="12">
				<el-pairings />
			</a-col>
		</a-row>
		<Field
			:name="name + '.nsfw'"
			type="checkbox"
			:unchecked-value="false"
			:value="true"
			v-slot="{ value, field, errorMessage }"
		>
			<a-checkbox v-bind="field" v-model="field.value">
				Has NSFW content
			</a-checkbox>
			<error-message :name="field.name" />
		</Field>
		<Field
			:name="name + '.loggedInOnly'"
			type="checkbox"
			:unchecked-value="false"
			:value="true"
			v-slot="{ value, field, errorMessage }"
		>
			<a-checkbox v-bind="field"> Visible only to registered users </a-checkbox>
			<error-message :name="field.name" />
		</Field>
		<Field
			:name="name + '.hidden'"
			type="checkbox"
			:unchecked-value="false"
			:value="true"
			v-slot="{ value, field, errorMessage }"
		>
			<a-tooltip>
				<template #title>
					Hides your story from everyone except you and site admins.
				</template>
				<a-checkbox v-bind="field"> Hidden </a-checkbox>
			</a-tooltip>
		</Field>
		<a-row>
			<a-col :span="24">
				<genre />
			</a-col>
		</a-row>
		<a-divider> Contents </a-divider>
		<upload-or-paste />
		<Field :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
	</div>
</template>