/* eslint @typescript-eslint/no-redundant-type-constituents: off */
import { randomUUID } from "crypto";
import { FlatTemplatable, tempstream } from "tempstream";
import { FormField } from "../fields/field.js";
import { FormDataValue } from "../form-types.js";
import { FormControl, FormControlContext } from "./form-control.js";

export class Derived<
	Consts extends Record<string, unknown | undefined>,
> extends FormControl {
	role = <const>"decoration";

	constructor(
		public fields: FormField[],
		public _render: (
			values: Record<string, string>,
			consts: Consts
		) => Promise<FlatTemplatable>,
		public getConsts: (
			fctx: FormControlContext
		) => Promise<Consts> = async () => ({}) as Consts
	) {
		super();
	}

	async getBackendValues(
		fctx: FormControlContext
	): Promise<Record<string, FormDataValue>> {
		const fieldnames = this.fields.map((f) => f.name);
		const result = Object.fromEntries(
			Object.entries(fctx.data.raw_values).filter(([key]) =>
				fieldnames.includes(key)
			)
		);
		return result;
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
		// the A makes it always a valid id, as it cannot start with a number
		const id = "A" + randomUUID();

		const consts = this.getConsts(fctx);

		const frontend_side_refresh_code = (values_code = "getValues()") =>
			`render(${values_code}, consts)
.then(result=>document.querySelector("#${id}").innerHTML=result)`;

		return tempstream /* HTML */ `<div>
			<script>
				(function () {
					const consts = ${"{" +
					Object.entries((await consts) || {})
						.map(([key, value]) => {
							return `"${key}": ${
								typeof value === "object"
									? JSON.stringify(value)
									: typeof value == "string"
										? '"' + value.toString() + '"'
										: (value as string).toString()
							}`;
						})
						.join(",") +
					"}"};
					const form_container =
						document.currentScript.closest(".form-container");
					const render = ${this._render.toString()};
					function getValues() {
						return Object.fromEntries(
							${JSON.stringify(
								this.fields.map((field) => field.name)
							)}.map((field_name) => {
								let input = form_container.querySelector(
									\`input[name="\${field_name}"]\`
								);
								if (!input) {
									return [field_name, ""];
								}
								if (input.type === "radio") {
									input = form_container.querySelector(
										\`input[name="\${field_name}"]:checked\`
									);
								}
								return [field_name, input.value];
							})
						);
					}
					function setupWatcher(field_name) {
						form_container
							.querySelectorAll(\`input[name="\${field_name}"]\`)
							.forEach((input) => {
								input.addEventListener("change", () => {
									${frontend_side_refresh_code()};
								});
							});
					}
					${JSON.stringify(
						this.fields.map((field) => field.name)
					)}.forEach(setupWatcher);
					setTimeout(() => {
						${frontend_side_refresh_code(
							JSON.stringify(await this.getBackendValues(fctx))
						)};
					}, 0);
				})();
			</script>
			<div id="${id}">${this._render({}, await consts)}</div>
		</div>`;
	}
}