import Dialog from "./Dialog.js";

type CellResult =
	| ["target", "any" | number]
	| ["mirror", "none"]
	| ["mirror", number, "left" | "right"]
;

export default class CellDialog extends Dialog<CellResult> {
	render() {
		this.body.innerHTML = `
			<h1>Place a target:</h1>
			<button value=target-any class=color>Any Colour</button>
			<button value=target-1 class="color c-1"></button>
			<button value=target-2 class="color c-2"></button>
			<button value=target-3 class="color c-3"></button>
			<button value=target-4 class="color c-4"></button>

			<h1>Place a mirror:</h1>
			<button value=mirror-none class=color>No Mirror</button>
			<div>
				<button value=mirror-1-left class="mirror c-1">⟍</button>
				<button value=mirror-1-right class="mirror c-1">⟋</button>
			</div>
			<div>
				<button value=mirror-2-left class="mirror c-2">⟍</button>
				<button value=mirror-2-right class="mirror c-2">⟋</button>
			</div>
			<div>
				<button value=mirror-3-left class="mirror c-3">⟍</button>
				<button value=mirror-3-right class="mirror c-3">⟋</button>
			</div>
			<div>
				<button value=mirror-4-left class="mirror c-4">⟍</button>
				<button value=mirror-4-right class="mirror c-4">⟋</button>
			</div>
		`;
		this.renderCancel();
	}

	extract(button: string): CellResult {
		return button.split("-") as CellResult;
	}
}