import { API } from '../api.js';
import { LitElement, css, html } from '../vendor/lit-html/lit-all.min.js';
import { DocumentQueue } from './document-queue.js';

export class DocumentMenu extends LitElement {
	static properties = {
		selectionAll: { type: Boolean },
		selectionIndeterminate: { type: Boolean },
	};

	/** @type {API} */
	api;

	/** @type {DocumentQueue|undefined} */
	#documentQueue;

	/**
	 * @param {DocumentQueue} documentQueue
	 */
	set documentQueue(documentQueue) {
		this.#documentQueue = documentQueue;

		this.#documentQueue.addEventListener("changeselection", /** @param {import('./document-queue.js').DocumentQueueEventChangeSelection} event */(event) => {
			switch (event.detail.selectedIDs.length) {
				case 0:
					this.selectionAll = false; this.selectionIndeterminate = false;
					break;

				case event.detail.allIDs.length:
					this.selectionAll = true; this.selectionIndeterminate = false;
					break;

				default:
					this.selectionAll = false; this.selectionIndeterminate = true;
					break;
			}
		});
	}

	constructor() {
		super();
		this.selectionAll = false;
		this.selectionIndeterminate = false;
	}

	onCheckboxChange(event) {
		switch (event.target.checked) {
			case true:
				this.selectionAll = true; this.selectionIndeterminate = false;
				this.#documentQueue.selectAll(true);
				break;

			default:
				this.selectionAll = false; this.selectionIndeterminate = false;
				this.#documentQueue.selectAll(false);
				break;
		}
	}

	static styles = css`
		:host {
			display: flex;
			padding: 8px;

			background-color: black;
		}

		#select-all {
			align-self: center;
			margin-left: 8px;
			margin-right: 16px;
			width: 24px;
			height: 24px;
		}

		#buttons {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 16px;
		}

		button {
			padding: 8px;
		}
	`;

	// @ts-ignore
	render() {
		return html`
			<input id="select-all" type="checkbox" .checked=${this.selectionAll} .indeterminate=${this.selectionIndeterminate} @change=${this.onCheckboxChange}></input>
			<div id="buttons">
				<button @click=${this.onButtonUpwards} title="Shifts all selected elements upwards.">▲</button>
				<button @click=${this.onButtonDownwards} title="Shifts all selected elements downwards.">▼</button>
				<button title="Takes two stacks of single sided scans and merges them as if they were scanned from both sides.">Duplex Merge</button>
				<button @click=${this.onButtonDelete}>Delete</button>
			</div>
		`;
	}

	/** @param {Event} event */
	onButtonUpwards(event) {
		if (this.api == undefined || this.#documentQueue == undefined) { return }

		const sInfo = this.#documentQueue.selectionInfo();
		this.api.queueShift(-1, ...sInfo.selectedIDs);
	}

	/** @param {Event} event */
	onButtonDownwards(event) {
		if (this.api == undefined || this.#documentQueue == undefined) { return }

		const sInfo = this.#documentQueue.selectionInfo();
		this.api.queueShift(1, ...sInfo.selectedIDs);
	}

	/** @param {Event} event */
	onButtonDelete(event) {
		if (this.api == undefined || this.#documentQueue == undefined) { return }

		const sInfo = this.#documentQueue.selectionInfo();
		this.api.queueDelete(...sInfo.selectedIDs);
	}
}

customElements.define("document-menu", DocumentMenu);