import { toPascalCase } from "js-convert-case";
import prompts from "prompts";
import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
import { formatWithPrettier } from "../utils/prettier.js";

import { listCollections } from "../utils/list-collections.js";

export async function jddEditorTemplate(actionName: string) {
	const response = await prompts([
		{
			type: "autocomplete",
			name: "collection",
			message:
				"Which sealious collection do you like to add CRUD forms for?",
			choices: (await listCollections()).map((collection) => ({
				title: collection,
				value: collection,
			})),
		},
	]);

	const collection_name = response.collection as string;

	const jdd_fields = (
		await extract_fields_from_collection(collection_name)
	).filter((e) => e.type == "jdd");

	let field_name = "";
	if (jdd_fields.length == 1) {
		field_name = jdd_fields[0].name;
		console.info(
			`Only one field of type JDD found: ${field_name}, so skipping the question...`
		);
	} else if (jdd_fields.length > 1) {
		const response = await prompts([
			{
				type: "autocomplete",
				name: "field_name",
				message: `Which jdd field from the ${collection_name} do you want to setup the jdd-editor for?`,
				choices: jdd_fields.map((field) => ({
					title: field.name,
					value: field.name,
				})),
			},
		]);
		field_name = response.field_name as string;
	} else {
		console.error(
			`Collection ${collection_name} does not have any fields of type JDD. Add such a field and try again.`
		);
		process.exit(13);
	}

	const collectionClassName = toPascalCase(collection_name);

	return await formatWithPrettier(`import type { Context } from "koa";
import type { FieldNames } from "sealious";
import { TempstreamJSX } from "tempstream";
import type ${collectionClassName} from "src/back/collections/${collection_name}.js";
import { EditJDDField } from "@sealcode/jdd-editor";
import html from "src/back/html.js";
import { registry } from "src/back/jdd-components/registry.js";
import { makeJDDContext } from "src/back/jdd-context.js";
import { defaultHead } from "src/back/defaultHead.js";

export const actionName = "${actionName}";

export default new (class JDDCreatePreviewPage extends EditJDDField<${collectionClassName}> {
	getCollection(ctx: Context) {
		return ctx.$app.collections["${collection_name}"];
	}

	getJDDFieldName(): FieldNames<${collectionClassName}["fields"]> {
	   return "${field_name}";
	}

	async renderPreParameterButtons(ctx: Context) {
		const item = await this.getItem(ctx);
		return (
			<div>
			   <h1>Edit ${collection_name}: {item.id}</h1>{" "}
			</div>
		);
	}
})({ html, registry, makeJDDContext, defaultHead });
`);
}