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 [];
	}

	getRegistryComponents() {
		const all_components = super.getRegistryComponents();
		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.getRegistryComponents()).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
	) {
		const checkbox_id = `component_${component_index}_open`;
		return (
			<div
				class={[
					"jdd-editor__component-block",
					"jdd-editor__component-block--number-" + component_index,
				]}
				data-component-debugger-target="componentBlock"
				data-component-index={component_index.toString()}
			>
				<summary class="jdd-editor__component-block__top_bar">
					{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
					)}
					<span>{component.component_name}</span>
					<label
						class="component-block__handle"
						for={checkbox_id}
						style="flex-grow: 1"
						data-action="click->component-debugger#labelClicked"
					>
						<span class="jdd-editor__component-block__chevron"> &gt; </span>
					</label>
				</summary>
				<input
					type="checkbox"
					class="component-collapse-toggle"
					name={`$[components][${component_index}][open]`}
					data-turbo-permanent
					id={checkbox_id}
					style="display:none"
					data-component-debugger-target="checkbox"
				/>
				<div class="jdd-editor__component-block__inner">
					{super.renderComponentBlock(ctx, state, component, component_index)}
				</div>
			</div>
		);
	}
}