import { FlatTemplatable, tempstream } from "tempstream";
import { FormField } from "../index.js";
import { toKebabCase } from "js-convert-case";

export function getRequiredClass(isRequired: boolean): string {
	return isRequired ? "required" : "";
}

function getModifierClasses(modifiers: string[]) {
	return modifiers.map((m) => "form-input__wrapper--" + m).join(" ");
}

export async function inputWrapper(
	type: string,
	modifiers: string[],
	input: FlatTemplatable
): Promise<string> {
	return tempstream /* HTML */ `<div
		class="form-input form-input--type-${type} form-input__wrapper ${getModifierClasses(
			modifiers
		)}"
	>
		${input}
	</div>`;
}

export async function autoWrapInput(field: FormField, input: FlatTemplatable) {
	return inputWrapper(
		toKebabCase(field.constructor.name),
		[
			`type--` + toKebabCase(field.constructor.name),
			`name--` + toKebabCase(field.name),
			getRequiredClass(field.required),
		],
		input
	);
}