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

export class DocumentQueueEntryPage extends LitElement {
	static properties = {
		queueEntry: { type: Object },

		api: { type: Object, state: true },
	};

	constructor() {
		super();

		/** @type {API} */
		this.api;
		/** @type {import('model').APIQueueEntry} */
		this.queueEntry;
	}

	static styles = css`
		:host {
			width: 100%;
			display: flex;
			justify-content: space-between;
			gap: 8px;
		}

		img {
			width: 128px;
		}

		#buttons {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 8px;
		}

		button {
			padding: 8px;
		}
	`;

	// @ts-ignore
	render() {
		return html`
			<img id="image" src=${`/api/queue-entry-page/${this.queueEntry.id}/preview`}></img>
			<div style="flex-grow: 1;">
				<span>This is a document</span>
			</div>
			<div id="buttons">
				<button @click=${e => this.api.queueShift(-1, this.queueEntry.id)}>▲</button>
				<button @click=${e => this.api.queueDelete(this.queueEntry.id)}>Delete</button>
				<button @click=${e => this.api.queueSplit(this.queueEntry.id)}>Split</button>
				<button @click=${e => this.api.queueShift(1, this.queueEntry.id)}>▼</button>
			</div>
		`;
	}
}

customElements.define("document-queue-entry-page", DocumentQueueEntryPage);