
import { emit } from '../../../utilities/emit.js';
import { ready } from '../../../utilities/ready.js';

customElements.define('custom-tag-list', class extends HTMLElement {
	connectedCallback() {
		ready(this);
	}

	// Initialize the component
	readyInit () {

		// Don't run if already initialized
		if (this.hasAttribute('is-ready')) return;

		const inputID = this.getAttribute('input') || false;
		const submitID = this.getAttribute('submit') || false;
		const listID = this.getAttribute('list') || false;
		if ( ! inputID || ! submitID || ! listID ) return;

		// Get the elements
		this.itemInput = this.querySelector(`#${inputID}`);
		this.itemSubmit = this.querySelector(`#${submitID}`);
		this.itemList = this.querySelector(`#${listID}`);
		this.itemTemplate = this.querySelector('template')?.content;
		if ( ! this.itemInput || ! this.itemSubmit || ! this.itemList || ! this.itemTemplate ) return;

		// Adjust Dom
		this.itemSubmit.removeAttribute('hidden'); // Unhide

		// Monitor submit
		this.itemSubmit.addEventListener('click', this);

		// Ready
		emit(this, 'custom-tag-list', 'ready');
		this.setAttribute('is-ready', '');
	}

	/**
	 * Handle events wrapper
	 * @param {Event} event
	 */
	handleEvent(event) {
		this[`handle${event.type}`](event);
	}

	/**
	 * Adding/Removing items
	 * @param {Event} event
	 */
	handleclick(event) {
		// Suppress normal button submit
		event.preventDefault();

		// Use trimmed value from input
		const value = this.itemInput.value.trim();

		// Ignore clearly empty values.
		if ( '' === value ) return;

		// Build out node item from template.
		const newItem = this.itemTemplate.cloneNode(true);
		newItem.querySelector('span').textContent = value;
		newItem.querySelector('input').value = value;

		// Add new item to list.
		this.itemList.appendChild( newItem );

		// clear input.
		this.itemInput.value = '';
	}
});

customElements.define('custom-tag', class extends HTMLElement {
	connectedCallback() {
		ready(this);
	}

	// Initialize the component
	readyInit () {

		// Don't run if already initialized
		if (this.hasAttribute('is-ready')) return;

		// Get the elements
		this.itemInput = this.querySelector(`input`);
		this.itemButton = this.querySelector(`button`);
		if ( ! this.itemInput || ! this.itemButton ) return;

		// Optional label use
		this.itemLabel = this.querySelector(`label`) || null;

		// Optional confirmation deletion modal
		const dialogID = this.itemButton.getAttribute( 'data-confirm-modal' );
		const dialog = dialogID ? document.querySelector( dialogID ) : null;
		this.dialog = ( dialogID && window.HTMLDialogElement !== undefined && dialog ) ? dialog : null;

		// Adjust Dom
		this.itemInput.setAttribute('type', 'hidden'); // Hide checkbox
		if ( this.itemLabel ) {
			this.itemLabel.style.pointerEvents = 'none'; // Suppress clicks on labels, require button
		}
		this.itemButton.removeAttribute('hidden'); // Unhide

		// Monitor button
		this.itemButton.addEventListener('click', this);

		this.setAttribute('is-ready', '');
	}

	/**
	 * Handle events wrapper
	 * @param {Event} event
	 */
	handleEvent(event) {
		this[`handle${event.type}`](event);
	}

	/**
	 * Removing items
	 * @param {Event} event
	 */
	handleclose(event) {
		// Tidy up after ourselves as no longer required.
		// Ensures that only 1 event listener is on the dialog at once
		this.dialog.removeEventListener('close', this);

		if ( 'delete' === this.dialog.returnValue ) {
			// Just remove ourselves.
			this.remove();
		}
	}

	/**
	 * Removing items
	 * @param {Event} event
	 */
	handleclick(event) {
		// Suppress normal button submit.
		event.preventDefault();

		if ( ! this.dialog ) {
			// No dialog, just remove ourselves.
			this.remove();
			return;
		}

		// Otherwise monitor dialog for returns.
		this.dialog.addEventListener('close', this);
		// And open the confirmation.
		this.dialog.showModal();
	}
});
