<modal-toggle> + <modal-content>

customElements.define('modal-toggle', class extends HTMLElement {

	/**
	 * Instantiate the component
	 */
	constructor () {

		// Inherit parent class properties
		super();

		// Set properties
		this.modal = document.querySelector(this.getAttribute('target'));
		this.toggle = this.querySelector('button, a');
		this.handler = this.createHandler();

		// Show button
		this.removeAttribute('hidden');

		// If toggle is a link, add proper role
		if (this.toggle.matches('a')) {
			this.toggle.setAttribute('role', 'button');
		}

	}

	/**
	 * Create the event handler function
	 * @return {Function} The handler function
	 */
	createHandler () {
		return (event) => {
			event.preventDefault();
			if (!this.modal) return;
			this.modal.open();
		};
	}

	/**
	 * Add event listener
	 */
	connectedCallback () {
		this.toggle.addEventListener('click', this.handler);
	}

	/**
	 * Remove event listener
	 */
	disconnectedCallback () {
		this.toggle.removeEventListener('click', this.handler);
	}

});

customElements.define('modal-content', class extends HTMLElement {

	/**
	 * Instantiate the component
	 */
	constructor () {

		// Inherit parent class properties
		super();

		// Set properties
		this.modal = this.querySelector('dialog');
		this.form = this.querySelector('[method="dialog"]');
		this.cancelling = false;
		this.clickHandler = this.createClickHandler();
		this.closeHandler = this.createCloseHandler();
		this.cancelHandler = this.createCancelHandler();
		this.inputHandler = this.createInputHandler();

		// Setup the DOM
		this.setup();

	}

	/**
	 * Prevent form buttons from submitting
	 */
	setup () {
		let btns = this.querySelectorAll('form [close]');
		for (let btn of btns) {
			btn.setAttribute('type', 'button');
		}
	}

	/**
	 * Create the click handler callback function
	 * @return {Function} The callback function
	 */
	createClickHandler () {
		return (event) => {
			if (!event.target.closest('[close]')) return;
			this.modal.returnValue = '';
			this.close('cancel', true);
		};
	}

	/**
	 * Create the close handler callback function
	 * @return {Function} The callback function
	 */
	createCloseHandler () {
		return (event) => {
			if (this.cancelling) {
				this.cancelling = false;
				return;
			}
			this.close(this.modal.returnValue ? 'submit' : 'cancel');
		};
	}

	/**
	 * Create the cancel handler callback function
	 * @return {Function} The callback function
	 */
	createCancelHandler () {
		return (event) => {
			this.close('cancel', true);
		};
	}

	/**
	 * Create the input handler callback function
	 * @return {Function} The callback function
	 */
	createInputHandler () {
		return (event) => {
			if (!event.target.matches('[modal-value]')) return;
			this.modal.returnValue = event.target.value || '';
		};
	}

	/**
	 * Attach event listeners
	 */
	connectedCallback () {
		if (!this.modal) return;
		this.modal.addEventListener('click', this.clickHandler);
		this.modal.addEventListener('close', this.closeHandler);
		this.modal.addEventListener('cancel', this.cancelHandler);
		if (!this.form) return;
		this.modal.addEventListener('input', this.inputHandler);
	}

	/**
	 * Remove event listeners
	 */
	disconnectedCallback () {
		if (!this.modal) return;
		this.modal.removeEventListener('click', this.clickHandler);
		this.modal.removeEventListener('close', this.closeHandler);
		this.modal.removeEventListener('cancel', this.cancelHandler);
		this.modal.removeEventListener('input', this.inputHandler);
	}

	/**
	 * Emit a custom event
	 * @param  {String} type The event type name
	 */
	emit (type) {

		// Set the event detail
		let detail = type === 'submit' ? this.modal.returnValue : null;

		// Create a new event
		let event = new CustomEvent(`modal:${type}`, {
			bubbles: true,
			detail
		});

		// Dispatch the event
		return this.dispatchEvent(event);

	}

	/**
	 * Open the modal
	 */
	open () {

		// If there's no modal, bail
		if (!this.modal) return;

		// Show the modal
		this.modal.showModal();

		// Add styling hook to body
		document.body.setAttribute('modal-open', '');

		// Emit an open event
		this.emit('open');

	}

	/**
	 * Close the modal
	 * @param  {string}  type   The close type
	 * @param  {boolean} cancel If true, temporary set cancel state
	 */
	close (type, cancel = false) {

		// If there's no modal, bail
		if (!this.modal) return;

		// Remove the style hook from the body
		document.body.removeAttribute('modal-open');

		// Temporarily set cancel state
		this.cancelling = cancel;

		// Close the modal
		this.modal.close();

		// Emit a close event
		this.emit(type);

	}

});