import { FlatTemplatable, tempstream } from "tempstream";
import { FieldGroup } from "./field-group.js";
import { randomUUID } from "crypto";
import { FormControl } from "./form-control.js";

type CollapsibleFieldGroupOptions = {
	label?: string;
	classes?: string[];
	openOnStart?: boolean;
	textWhenOpen?: string;
	textWhenClosed?: string;
	groupID?: string;
};

export class CollapsibleFieldGroup extends FieldGroup {
	public collapseID: string;
	constructor(
		public controls: FormControl[],
		public options: CollapsibleFieldGroupOptions = {}
	) {
		super([]);
		if (this.options.groupID == undefined) {
			this.options.groupID = "A" + randomUUID(); // "A" is needed as ids always have to start with a letter
		}
		this.collapseID = this.options.groupID + "collapse";
	}

	getGroupLabelProps() {
		return tempstream`${super.getGroupLabelProps()} for="${
			this.collapseID
		}"`;
	}

	preLabelContainer(): FlatTemplatable {
		return /* HTML */ `<style>
				input#${this.collapseID} {
					display: none;
				}

				input#${this.collapseID} ~ .field-group__fields {
					display: none;
				}

				input#${this.collapseID}:checked ~ .field-group__fields {
					display: block;
				}

				input#${this.collapseID}
					~ .field-group__label-container
					.field-group__collapse-label-text--open {
					display: none;
				}

				input#${this.collapseID}:checked
					~ .field-group__label-container
					.field-group__collapse-label-text--open {
					display: inline-block;
				}

				input#${this.collapseID}
					~ .field-group__label-container
					.field-group__collapse-label-text--closed {
					display: inline-block;
				}

				input#${this.collapseID}:checked
					~ .field-group__label-container
					.field-group__collapse-label-text--closed {
					display: none;
				}
			</style>
			<input
				type="checkbox"
				id="${this.collapseID}"
				${this.options.openOnStart ? "checked" : ""}
			/>`;
	}

	postLabel(): FlatTemplatable {
		return /* HTML */ `<label
			class="field-group__collapse-label"
			for="${this.collapseID}"
		>
			<span
				class="field-group__collapse-label-text field-group__collapse-label-text--open"
			>
				${this.options.textWhenOpen || "close"}
			</span>
			<span
				class="field-group__collapse-label-text field-group__collapse-label-text--closed"
			>
				${this.options.textWhenClosed || "open"}
			</span>
		</label>`;
	}
}