import { FlatTemplatable, tempstream } from "tempstream";
import { FormField } from "../fields/field.js";
import { FormControlContext } from "./form-control.js";
import { FormFieldControl } from "./form-field-control.js";

export class BigRadioGroup extends FormFieldControl {
	constructor(
		public field: FormField,
		public options: Record<
			string,
			{
				description:
					| FlatTemplatable
					| ((fctx: FormControlContext) => FlatTemplatable);
			}
		>
	) {
		super([field]);
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
		const { raw: current_value } = await this.field.getParsedValue(
			fctx.ctx,
			fctx.data.raw_values
		);
		return tempstream /* HTML */ `<div class="bigradios">
			${Object.entries(this.options).map(([key, { description }]) => {
				const id = `${this.field.name}-radio-${key}`;
				return tempstream /* HTML */ `<input
						type="radio"
						name="${this.field.name}"
						value="${key}"
						id="${id}"
						style="display: none"
						${fctx.form_id ? `form=${fctx.form_id}` : ""}
						${this.field.required ? "required" : ""}
						${key == current_value ? "checked" : ""}
					/>
					<div class="bigradio">
						${typeof description == "function"
							? description(fctx)
							: description}
						<label class="bigradio__cta" for="${id}">Wybierz</label>
					</div>`;
			})}
		</div>`;
	}
}