import type { BaseContext } from "koa";
import { TempstreamJSX } from "tempstream";
import { ComponentPreviewActions } from "./component-preview-actions.js";
import type { JDDPageState } from "./jdd-page.js";
import JDDPage from "./jdd-page.js";

import move_row_down_icon from "./table-move-row-down.svg";
import move_row_up_icon from "./table-move-row-up.svg";

export default abstract class JDDCreator extends JDDPage {
	actions = ComponentPreviewActions;

	/**
	 * This method returns list of components allowed in JDD Editor instance.
	 * If list is empty it will allow all of the components in registry,
	 * if you overide this function you can decide on what components should
	 * available.
	 */
	getAllowedComponents(): string[] {
		return [];
	}

	getRegistryCompoments() {
		const all_components = super.getRegistryCompoments();
		const allowed_components = this.getAllowedComponents();

		if (allowed_components.length > 0) {
			return Object.fromEntries(
				Object.entries(all_components).filter(([name]) =>
					allowed_components.includes(name)
				)
			);
		}

		return all_components;
	}

	renderParameterButtons(state: JDDPageState) {
		{
			/*The below button has to be here in order for it to be the default behavior */
		}
		return (
			<div>
				<input type="submit" value="Preview" />
				<select name="component">
					{Object.keys(this.getRegistryCompoments()).map((cmp) => (
						<option value={cmp}>{cmp}</option>
					))}
				</select>
				{this.makeActionButton(state, {
					action: "add_component",
					label: "Add component",
				})}
			</div>
		);
	}

	renderComponentBlock(
		ctx: BaseContext,
		state: JDDPageState,
		component: {
			component_name: string;
			args: Record<string, unknown>;
		},
		component_index: number
	) {
		return (
			<fieldset>
				<legend>Component - {component.component_name}</legend>
				{this.makeActionButton(
					state,
					{ action: "remove_component", label: "❌" },
					component_index
				)}
				{this.makeActionButton(
					state,
					{
						action: "move_component_up",
						label: "Move this row up",
						content: /* HTML */ `<img
							width="20"
							height="20"
							src="${move_row_up_icon.url}"
						/>`,
					},
					component_index
				)}
				{this.makeActionButton(
					state,
					{
						action: "move_component_down",
						label: "Move this row down",
						content: /* HTML */ `<img
							width="20"
							height="20"
							src="${move_row_down_icon.url}"
						/>`,
					},
					component_index
				)}
				{super.renderComponentBlock(ctx, state, component, component_index)}
			</fieldset>
		);
	}
}