/* eslint @typescript-eslint/no-base-to-string: off */
import { FlatTemplatable, tempstream } from "tempstream";
import { attribute } from "../../sanitize.js";
import { PickFromListField } from "../fields/pick-from-list.js";
import { FormControlContext } from "./form-control.js";
import { FormFieldControl } from "./form-field-control.js";

/**
 * This control has own forms in it so if you want to use it you
 * probably shouldn't use `await super.render(ctx, data, path)` in
 * render method of you from implementation and you should write
 * your own implementation of this method. See forms that uses
 * this control for reference.
 */
export class EditableCollectionSubset extends FormFieldControl {
	constructor(
		public field: PickFromListField<false>,
		public actionname: string,
		public listLabel?: string,
		public selectLabel?: string
	) {
		super([field]);
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
		const { parsed: values } = await this.field.getParsedValue(
			fctx.ctx,
			fctx.data.raw_values
		);

		return tempstream /* HTML */ `<div>
			<ul>
				${Promise.resolve(this.field.generateOptions(fctx.ctx)).then(
					(options) =>
						Object.entries(options)
							.filter(([value]) =>
								(values || ([] as string[])).includes(value)
							)
							.map(
								([value, text]) => /* HTML */ `
									<li>
										<form
											method="POST"
											action="${fctx.ctx.path}"
										>
											<span
												>${
													// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
													text
												}</span
											>
											<input
												type="hidden"
												name="${this.field.name}"
												value="${attribute(value)}"
											/>
											<input
												type="hidden"
												name="${this.actionname}"
												value="list"
											/>
											<input
												type="submit"
												${this.listLabel
													? `value="${this.listLabel}"`
													: ""}
											/>
										</form>
									</li>
								`
							)
				)}
			</ul>
			<form method="POST" action="${fctx.ctx.path}">
				<select name="${this.field.name}">
					${Promise.resolve(
						this.field.generateOptions(fctx.ctx)
					).then((options) =>
						Object.entries(options)
							.filter(
								([value]) =>
									!(values || ([] as string[])).includes(
										value
									)
							)
							.map(
								([value, text]) =>
									`<option value="${attribute(value)}">${
										// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
										text
									}</option>`
							)
					)}
				</select>
				<input type="hidden" name="${this.actionname}" value="select" />
				<input
					type="submit"
					${this.selectLabel ? `value="${this.selectLabel}"` : ""}
				/>
			</form>
		</div>`;
	}
	role = <const>"input";
}