import { Page } from "playwright";
import { collectionTemplate } from "../../templates/collection.js";
import { formTemplate } from "../../templates/form.js";
import { RealAppTest } from "../../test_utils/test-on-real-app.js";
import { getBrowser } from "../../utils/browser-creator.js";
import { expect as PlaywritghtExpect } from "@playwright/test";

describe("single-reference.test", () => {
	let page: Page;
	before(async () => {
		const browser = await getBrowser();
		const context = await browser.newContext();
		page = await context.newPage();
	});

	after(async () => {
		await page.close();
	});

	it("creates minimal sealious app and adds form using single-reference field that works", async function () {
		const test_app = await RealAppTest.init();

		// add possiblity to modify templates (form and collection) and create test case

		await test_app.addFile(
			"src/back/collections/articles.ts",
			collectionTemplate("articles", `title: new FieldTypes.Text(),`)
		);

		await test_app.addFile(
			"src/back/collections/comments.ts",
			collectionTemplate(
				"comments",
				`text: new FieldTypes.Text(),
                 article: new FieldTypes.SingleReference("articles"),`
			)
		);

		const form_file_path = "src/back/routes/some-form.form.ts";
		await test_app.addFile(
			form_file_path,
			await formTemplate("SomeForm", {
				postimport: `import {Comments} from "../collections/collections.js"; import {Fields} from "@sealcode/sealgen";`,
				get_fields: `()=>(<const>{article: new Fields.CollectionField(true, Comments.fields.article)})`,
				get_controls: `(fields)=>[new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")})]`,
				validate_method: "",
				success_message: "Submit OK",
			})
		);

		await test_app.start();
		await test_app.httpPOST(`/api/v1/collections/articles`, { title: "article 1" });
		await test_app.httpPOST(`/api/v1/collections/articles`, { title: "article 2" });

		await page.goto(`http://localhost:${test_app.app_port}/some-form/`);
		await page.locator("html").click();
		await PlaywritghtExpect(page.getByLabel("article")).toBeVisible();
		await page.getByLabel("article").selectOption({ label: "article 2" });
		await page.getByRole("button", { name: "Wyślij" }).click();
		await page.getByLabel("article").selectOption({ label: "--" }); // "--" means empty value - it should be available, as the field is not required

		await test_app.close();
	}).timeout(100 * 1000);
});