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

export class DocumentQueueEntrySeparator 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;
		}

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

		button {
			padding: 8px;
		}
	`;

	// @ts-ignore
	render() {
		return html`
			<div style="flex-grow: 1; align-self: center;">
				<hr>
			</div>
			<div id="buttons">
				<button @click=${e => this.api.queueDelete(this.queueEntry.id)}>Delete</button>
			</div>
		`;
	}
}

customElements.define("document-queue-entry-separator", DocumentQueueEntrySeparator);