import type { Context } from "koa";
import { TempstreamJSX } from "tempstream";
import { Page } from "@sealcode/sealgen";
import html from "../html.js";
import { fullscreenMenu } from "./common/fullscreen-menu/fullscreen-menu.js";

export const actionName = "FullscreenMenuDemo";

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

	async render(ctx: Context) {
		return html(
			ctx,
			"FullscreenMenuDemo",
			<div>
				{
					/* HTML */ `<style>
						.fullscreen-menu__panel--panel_1 {
							transform: translateX(-50vw); /* move that one to the left */
						}

						.fullscreen-menu label {
							cursor: pointer;
							font-weight: bold;
						}

						.fullscreen-menu__panel {
							font-size: 20px;
							display: flex;
							flex-flow: column;
							row-gap: 20px;
						}
					</style>`
				}
				{fullscreenMenu({
					id: "demo",
					panels: {
						panel_1: (
							<div>
								PANEL 1. Click{" "}
								<label for="demo__activate--panel_2">here</label> to go to
								panel 2<div>And here's some description</div>
								Go to{" "}
								<label for="demo__activate--panel_3">
									Very tall panel 3
								</label>
							</div>
						),
						panel_2: (
							<div>
								PANEL 2
								<div>
									<label for="demo__activate--panel_1">←Go back</label>
								</div>
							</div>
						),
						panel_3: (
							<div style="display: flex; flex-flow: column; row-gap: 20px;">
								<label for="demo__activate--panel_1">←Go back</label>
								{[
									1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
									17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
									30,
								].map((n) => (
									<div>{n}</div>
								))}
							</div>
						),
					},
					default_panel: "panel_1",
				})}
				<div style="display: flex; flex-flow: column; row-gap: 10px;">
					<label for="demo--visible">Toggle menu via checkbox label</label>
					<button onclick="demo.showModal()" type="button">
						Toggle menu with javascript
					</button>
				</div>
				<div style="height: 150vh">
					This page is taaaaall - for testing reasons
				</div>
			</div>
		);
	}
})();