import Router from "@koa/router";
import getPort from "get-port";
import { Browser, Page } from "playwright";
import type { Context } from "koa";
import Koa from "koa";
import { mount } from "../../mount.js";
import { Form } from "../form.js";
import { getBrowser } from "../../utils/browser-creator.js";
import assert from "assert";
import { TextBasedSimpleField } from "./simple-form-field.js";
import { SimpleInput } from "../controls/simple-input.js";
import { FormData } from "../form-types.js";
import { Boolean } from "./boolean.js";
import { Checkbox } from "../controls/checkbox.js";

describe("basic field", () => {
	describe("basic tests", async () => {
		let server: ReturnType<Koa["listen"]>;
		let browser: Browser;
		let page: Page;

		afterEach(() => {
			server.close();
		});

		it("sends the values", async () => {
			const port = await getPort();
			console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
			const app = new Koa();
			const router = new Router();

			const fields = {
				text: new TextBasedSimpleField(true),
			};

			let received_values: unknown;

			mount(
				router,
				"/",
				new (class extends Form<typeof fields, unknown> {
					getFields = () => fields;
					getControls = () => [new SimpleInput(fields.text)];

					async onSubmit(ctx: Context, data: FormData) {
						received_values = await this.getParsedValues(ctx);
						const { parsed: email } = await this.fields.text.getParsedValue(
							ctx,
							data.raw_values
						);
						email?.padStart(2, "0"); // if the typechecks are ok, this will not throw
					}

					async canAccess(_: Context) {
						return { canAccess: true, message: "" };
					}
				})(),
				true
			);
			app.use(router.routes()).use(router.allowedMethods());
			server = app.listen(port);

			browser = await getBrowser();
			const context = await browser.newContext();
			page = await context.newPage();
			await page.goto(`http://localhost:${port}`);
		});

		it("Doesn't call `isValueValid` and `parse` if the value is empty", async () => {
			const port = await getPort();
			console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
			const app = new Koa();
			const router = new Router();

			let is_value_valid_called = false;
			let parse_called = false;

			const fields = {
				text: new (class MockField extends TextBasedSimpleField<false> {
					public async isValueValid() {
						is_value_valid_called = true;
						return true as any;
					}

					public async parse() {
						parse_called = true;
						return true as any;
					}
				})(false),
			};

			mount(
				router,
				"/",
				new (class extends Form<typeof fields, unknown> {
					getFields = () => fields;
					getControls = () => [new SimpleInput(fields.text)];

					async onSubmit() {
						//noop
					}

					async canAccess(_: Context) {
						return { canAccess: true, message: "" };
					}
				})(),
				true
			);
			app.use(router.routes()).use(router.allowedMethods());
			server = app.listen(port);

			browser = await getBrowser();
			const context = await browser.newContext();
			page = await context.newPage();
			await page.goto(`http://localhost:${port}`);
			await page.getByRole("button", { name: "Wyślij" }).click();
			assert(is_value_valid_called == false);
			assert(parse_called == false);
		});

		it("Accepts a form where non-required values are empty", async () => {
			const port = await getPort();
			console.info(`Using port ${port} form checkboxed-list-input.test.ts`);
			const app = new Koa();
			const router = new Router();

			let submit_called = false;

			const fields = {
				text: new TextBasedSimpleField(false),
				checkbox: new Boolean(false),
			};

			mount(
				router,
				"/",
				new (class extends Form<typeof fields, unknown> {
					getFields = () => fields;
					getControls = () => [
						new SimpleInput(fields.text),
						new Checkbox(fields.checkbox),
					];

					async onSubmit() {
						submit_called = true;
						//noop
					}

					async canAccess(_: Context) {
						return { canAccess: true, message: "" };
					}
				})(),
				true
			);
			app.use(router.routes()).use(router.allowedMethods());
			server = app.listen(port);

			browser = await getBrowser();
			const context = await browser.newContext();
			page = await context.newPage();
			await page.goto(`http://localhost:${port}`);
			await page.getByRole("button", { name: "Wyślij" }).click();

			assert(submit_called, "onSubmit()  triggered");
			await page.getByText("Done").click();
		});
	});
});