<script lang="ts" setup>
	import {
		Form as VeeForm,
		Field as veeField,
		useForm,
		useField,
		ErrorMessage,
	} from "vee-validate";
	import { story } from "~/lib/client/editorConfig";
	import icon from "~/components/icon.vue";
	import baseEditor from "../../baseEditor.vue";
	const fname = inject<string>("curName");
	const fileList = ref([]);
	const potField = useField(fname + "pot");
	const fileField = useField(fname + "file");
	const { value: pvalue } = potField;
</script>
<template>
	<a-radio-group v-model:value="pvalue">
		<a-radio value="pasteOrType">Paste or type content</a-radio>
		<a-radio value="upload">Upload a file</a-radio>
	</a-radio-group>
	<br />
	<br />
	<base-editor
		label=""
		v-if="pvalue === 'pasteOrType'"
		:init="story"
		:name="fname + 'content'"
	/>
	<a-upload
		v-model:file-list="fileList"
		v-else-if="pvalue === 'upload'"
		:name="fname + 'file'"
		accept=".doc,.docx,.md,.markdown"
		:max-count="1"
		action="/api/upload/content"
		method="post"
		@reject="(a) => console.error(a)"
		@change="
			(bap) => {
				console.log(bap);
				let resp;
				try {
					resp = bap.file.response;
					if (resp.success) {
						fileField.setValue(resp.fileName);
						console.log(fileField.value);
					}
				} catch (e) {
					console.error('not yet');
				}
			}
		"
	>
		<a-button type="primary">
			<icon istyle="regular" name="upload" /><span style="margin-left: 0.5em">
				Upload a file</span
			>
		</a-button>
	</a-upload>
</template>