import { FlatTemplatable, tempstream } from "tempstream";
import { FormControlContext } from "./form-control.js";
import { FormFieldControl } from "./form-field-control.js";
import { FormField } from "../fields/field.js";
import { FormDataValue } from "../form-types.js";
import { autoWrapInput } from "../../utils/input-wrapper.js";

export class Hybrid extends FormFieldControl {
	constructor(
		public main_field: FormField,
		public subfields: Record<string, FormField>
	) {
		super(Object.values(subfields));
		for (const [field_name, field] of Object.entries(subfields)) {
			field.setName(`${main_field.name}[${field_name}]`);
		}
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
		const raw_values = (fctx.data.raw_values[this.main_field.name] ||
			{}) as Record<string, FormDataValue>;
		const new_fctx = new FormControlContext(
			fctx.ctx,
			{
				raw_values,
				messages: [],
				field_messages: {},
			},
			[],
			fctx.field_name_prefix,
			fctx.form_id,
			fctx.validate
		);
		return tempstream`<fieldset><legend>${this.main_field.label || this.main_field.name}</legend>${Object.values(
			this.subfields
		).map(
			async (subfield) =>
				tempstream`${autoWrapInput(
					subfield,
					await subfield.getControl().render(new_fctx)
				)}`
		)}</fieldset>`;
	}
}