import { Context } from "koa";
import { FormField } from "../fields/field.js";
import { FormDataValue } from "../form-types.js";
import { FormControlContext } from "./form-control.js";
import { SimpleInput, SimpleInputOptions } from "./simple-input.js";

export class Textarea extends SimpleInput {
	constructor(
		public field: FormField<boolean>,
		public options: SimpleInputOptions & {
			label?: string;
			rows?: number;
			cols?: number;
			description?: string;
			autogrow?: boolean;
		} = {}
	) {
		super(field, options);
	}

	renderDescription() {
		return this.options.description
			? /* HTML */ `<div class="form-input__description">
					${this.options.description}
				</div>`
			: "";
	}

	async getInputAttributes(
		fctx: FormControlContext
	): Promise<Record<string, string | boolean>> {
		const original = await super.getInputAttributes(fctx);
		let onkeydown = original.onkeydown || "";
		if (this.options.autogrow) {
			onkeydown += `;this.style.height = '5px';this.style.height = Math.max((this.scrollHeight)+32, ${
				((this.options.rows || 2) + 1) * 16
			} )+'px';`;
		}
		return {
			...original,
			rows: this.options.rows ? this.options.rows.toString() : false,
			cols: this.options.cols ? this.options.cols.toString() : false,
			onkeydown,
		};
	}

	async renderInput(
		ctx: Context,
		attributes: string,
		data: Record<string, FormDataValue>
	) {
		const { parsed: value } = await this.field.getParsedValue(ctx, data);
		return /* HTML */ `<textarea ${attributes}>
${String(value) || ""}</textarea
		>`;
	}
}