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

export class FieldGroup extends FormFieldControl {
	constructor(
		public controls: FormControl[],
		public options: {
			label?: string;
			classes?: string[];
			containerID?: string;
		} = {}
	) {
		super([]);
	}

	preLabel(): FlatTemplatable {
		return "";
	}

	preLabelContainer(): FlatTemplatable {
		return "";
	}

	postLabel(): FlatTemplatable {
		return "";
	}

	preFields(): FlatTemplatable {
		return "";
	}

	postFields(): FlatTemplatable {
		return "";
	}

	getGroupLabelProps(): FlatTemplatable {
		return `class="field-group__label"`;
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
		const { label, classes } = this.options;

		return tempstream /* HTML */ `
			<div
				class="field-group ${(classes || []).join(" ")}"
				${this.options.containerID
					? `id="${this.options.containerID}"`
					: ""}
			>
				${this.preLabelContainer()}
				<div class="field-group__label-container">
					${this.preLabel()}
					${label
						? tempstream`<label ${this.getGroupLabelProps()}>${label}</label>`
						: ""}
					${this.postLabel()}
				</div>
				${this.preFields()}
				<div class="field-group__fields">
					${this.controls.map((control) => control.render(fctx))}
				</div>
				${this.postFields()}
			</div>
		`;
	}
}