import { curryImportPath } from "../utils/import-path.js";
import { formatWithPrettier } from "../utils/prettier.js";

export async function statefulPageTemplate(
	action_name: string,
	newfilefullpath: string
): Promise<string> {
	const rel = curryImportPath(newfilefullpath);
	return formatWithPrettier(`import { TempstreamJSX, Templatable } from "tempstream";
import { Context } from "koa";
import { StatefulPage, StatefulPageActionArgument } from "@sealcode/sealgen";
import html from "${rel("src/back/html.js")}";

export const actionName = "${action_name}";

const actions = {
	add: ({ state, inputs }: StatefulPageActionArgument<State>) => {
		return {
			...state,
			elements: [...state.elements, inputs.element_to_add || "new element"],
		};
	},
	remove: ({
		state,
		args: [index_to_remove],
	}: StatefulPageActionArgument<State, [number]>) => {
		return {
			...state,
			elements: state.elements.filter((_, index) => index != index_to_remove),
		};
	},
} as const;

type State = {
	elements: string[];
};

export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
	actions = actions;

	getInitialState() {
		return { elements: ["one", "two", "three"] };
	}

	wrapInLayout(ctx: Context, content: Templatable): Templatable {
		return html({ctx, title: "${action_name}", body: <>{content}</>, description: "${action_name}"});
	}

	render(ctx: Context, state: State, inputs: Record<string, string>) {
		return (
			<div>
				<ul>
					{state.elements.map((e, index) => (
						<li>
							{e} {this.makeActionButton(state, "remove", index)}
						</li>
					))}
				</ul>
				<div>
					<input
						name="element_to_add"
						type="text"
						value={inputs.element_to_add || ""}
					/>
					{this.makeActionButton(state, "add")}
				</div>
			</div>
		);
	}
})();
`);
}