import { Context } from "koa";
import { tempstream } from "tempstream";
import { PickFromListField } from "../fields/pick-from-list.js";
import { FormControlContext } from "./form-control.js";
import { SimpleInput } from "./simple-input.js";

export class Autocomplete extends SimpleInput {
	constructor(
		public field: PickFromListField<boolean>,
		public options: { id?: string; label?: string; placeholder?: string }
	) {
		super(field);
	}

	getListID(): string {
		return this.getID() + "_list";
	}

	async getInputAttributes(fctx: FormControlContext) {
		return {
			...(await super.getInputAttributes(fctx)),
			list: this.getListID(),
		};
	}

	async postInput(ctx: Context) {
		return tempstream /* HTML */ `<datalist id="${this.getListID()}">
			${(await this.field.generateOptions(ctx)).map(
				({ value }) => /* HTML */ `<option>${value}</option>`
			)}
		</datalist>`;
	}
}