// Copyright Epic Games, Inc. All Rights Reserved.

"use strict";

import { ZenPage } from "./page.js"
import { Table, PropTable, Toolbar, ProgressBar } from "../util/widgets.js"
import { Modal, } from "../util/modal.js"

////////////////////////////////////////////////////////////////////////////////
export class Page extends ZenPage
{
	main()
	{
		var gen_word = (function() {
			var s = 0x314251;
			var r = function(a, b) {
				s = (s * 0x493) & 0x7fffffff;
				return ((s >> 3) % (b - a)) + a;
			};
			return function(a=5, b=10) {
				const co = "aeioubcdfghjklmnpqrstvwxyz";
				var ret = "";
				for (var i = 0, n = r(a,b); i < n; ++i)
					ret += co[r(0, co.length)];
				return ret;
			};
		})();
		var gen_para = function(a=5, b=10, s=" ") {
			var ret = gen_word(2, 9);
			for (var i = 0; i < ((ret.length * 0x493) % (b - a)) + b; ++i)
				ret += s + gen_word(2, 9);
			return ret;
		}

		this.set_title("test");

		// swatches
		const swatches = this.tag()
			.style("position", "absolute")
			.style("top", "3.5em")
			.style("left", "3.5em")
		for (var suffix of ["g0", "g1", "g2", "g3", "g4",
							"p0", "p1", "p2", "p3", "p4",
							"ln", "er"])
		{
			swatches.tag()
				.style("float", "left")
				.style("width", "2em")
				.style("height", "2em")
				.style("background-color", `var(--theme_${suffix})`)
				.text(suffix);
		}

		// section
		var section0 = this.add_section("section");
		var section1 = section0.add_section("sub-section");
		var section2 = section1.add_section("sub-sub-section");

		// table
		const cols = [gen_word(), gen_word(), gen_word(), gen_word()];
		var tables = [
			section0.add_widget(Table, cols),
			section1.add_widget(Table, cols, Table.Flag_EvenSpacing, 5),
			section2.add_widget(Table, cols, Table.Flag_EvenSpacing, -1),
		];

		for (const table of tables)
		{
			table.add_row(gen_word());
			table.add_row(gen_word(), gen_word(), gen_word(), gen_word());
			table.add_row(gen_word(), gen_word(), gen_para(15, 25), gen_word(), gen_word(), gen_word(), gen_word(), gen_word());
		}

		// spacing tests
		{
			const spacing_section = section0.add_section("spacing");
			const flags = {
				"EvenSpacing"			: Table.Flag_EvenSpacing,
				"EvenSpacing|BiasLeft"	: Table.Flag_EvenSpacing | Table.Flag_BiasLeft,
				"PackRight"				: Table.Flag_PackRight,
			};
			for (const flag_name in flags)
			{
				const flag = flags[flag_name];
				const another_table = spacing_section.add_widget(
					Table,
					[flag_name, gen_word(), gen_word(), gen_word(), gen_word()],
					flag,
				);
				for (var i = 0; i < 3; ++i)
					another_table.add_row(gen_para(1, 5), gen_para(1, 3), gen_word(), gen_word(), gen_word());
			}
		}

		// prop-table
		var pt_section = section0.add_section("prop-table")
		var prop_table = pt_section.add_widget(PropTable);
		for (var i = 0; i < 7; ++i)
			prop_table.add_property(gen_word(), gen_para(1, 20, "/"));

		// misc
		const misc_section = section0.add_section("misc").add_section("misc");
		misc_section.tag().text("just text");
		misc_section.tag().text("this is a link").link();
		misc_section.tag().text("MODAL DIALOG").on_click((e) => {
			new Modal()
				.title("modal")
				.message("here is a message what I wrote")
				.option("press me!", () => { alert("hi"); })
				.option("cancel", () => void(0));
		});

		// toolbar
		pt_section.add_section("toolbar");
		var toolbar = pt_section.add_widget(Toolbar);
		for (const side of [toolbar.left(), toolbar.right()])
		{
			side.add("tb_item0");
			side.add("tb_item1");
			side.sep();
			side.add("tb_item2");
		}

		var tb_item_clicked = function(arg0, arg1) {
			alert(arg0 + " != " + arg1);
		};
		var row = prop_table.add_property("toolbar", "");
		toolbar = new Toolbar(row.get_cell(-1), true);
		toolbar.left() .add("tbitem0").on_click(tb_item_clicked, 11, -22);
		toolbar.left() .add("tbitem1").on_click(tb_item_clicked, 22, -33);
		toolbar.right().add("tbitem2").on_click(tb_item_clicked, 33, -55);
		toolbar.right().add("tbitem3").on_click(tb_item_clicked, 44, -88);

		// progress bar
		const progress_bar = this.add_widget(ProgressBar);
		setInterval(function() {
			var count = 0
			return () => {
				count = (count + 1) % 100;
				progress_bar.set_progress("testing", count, 100);
			};
		}(), 49.3);

		// error
		throw Error("deliberate error");
	}
}