import { toSentenceCase } from "js-convert-case";
import { curryImportPath } from "../utils/import-path.js";

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

export const actionName = "${action_name}";

export default new (class PatroniteAutoImportStatusPage extends Page {
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	async canAccess(_: Context) {
		return { canAccess: true, message: "" };
	}

	public interval = 2000;

	async render(ctx: Context) {
		const lpr_id = ctx.params.id;
		const lpr_data = LongRunningProcess.getByID(ctx.$context, lpr_id);

		return html(
			ctx,
			"${toSentenceCase(action_name)}",
			lpr_data.then((lpr_data) => (
				<div>
					<div>status: {lpr_data.state}</div>
					<div style="height: 20px; width: 100%">
						<div
							style={\`height: 100%; background-color: green; width: \${Math.round(
								lpr_data.progress * 100
							)}%\`}
						></div>
					</div>
					<div>
						{lpr_data.events.map((e) => (
							/* HTML */ <div>{e.message}</div>
						))}
					</div>
					{lpr_data.state !== "error" && lpr_data.state !== "finished"
						? /* HTML */ \`<script>
								setTimeout(() => {
									document.location = document.location;
								}, \${this.interval});
						  </script>\`
						: ""}
				</div>
			))
		);
	}
})();
`;
}