import { Context } from "koa";
import { FlatTemplatable, tempstream } from "tempstream";
import { attribute } from "../../sanitize.js";
import { FormField } from "../fields/field.js";
import { PickFromListField } from "../fields/pick-from-list.js";
import { FormDataValue } from "../form-types.js";
import { FormControlContext } from "./form-control.js";
import { SimpleInput } from "./simple-input.js";

export type DropdownOptions = {
	label: string;
	autosubmit?: boolean;
	autocomplete?: boolean;
};

export type DropdownOption = { value: string; label: string };

export class FreeformDropdown extends SimpleInput {
	constructor(
		public field: FormField<boolean, string | null>,
		public _generateOptions: (ctx: Context) => Promise<DropdownOption[]>,
		public options: DropdownOptions = {
			label: field.label || field.name,
			autosubmit: false,
			autocomplete: true,
		}
	) {
		super(field, options);
	}

	async generateOptions(ctx: Context): Promise<DropdownOption[]> {
		return this._generateOptions(ctx);
	}

	async getInputAttributes(
		fctx: FormControlContext
	): Promise<Record<string, string | boolean>> {
		const original = await super.getInputAttributes(fctx);
		return {
			...original,
			...Object.fromEntries([
				...(this.options.autosubmit
					? [
							[
								"onchange",
								((original.onchange as string | undefined) ||
									"") + ";this.form.submit();",
							],
						]
					: []),
			]),
		} as Record<string, string>;
	}

	async renderInput(
		ctx: Context,
		attributes_str: string,
		data: Record<string, FormDataValue>
	): Promise<FlatTemplatable> {
		const { parsed: picked_value } = await this.field.getParsedValue(
			ctx,
			data
		);
		return /* HTML */ tempstream`<select ${attributes_str} autocomplete="off">
			${Promise.resolve(this.generateOptions(ctx)).then((options) =>
				options.map(
					({ value, label }) =>
						`<option value="${attribute(value)}" ${
							(value || "") == picked_value ? "selected" : ""
						}>${label}</option>`
				)
			)}
		</select>`;
	}
}

export class Dropdown extends FreeformDropdown {
	constructor(
		public field: PickFromListField<boolean>,
		public options: DropdownOptions = {
			label: field.label || field.name,
			autosubmit: false,
			autocomplete: true,
		}
	) {
		super(field, (ctx) => field.generateOptions(ctx), options);
	}
}