import { Component } from '@aspect';
import { html } from '@aspect/dom';

interface State {
	message: string;
	open: boolean;
	title: string;
}

const el: HTMLDivElement = document.querySelector('#dialog');

class Dialog extends Component<State> {
	public parent: HTMLElement;
	constructor(el: HTMLDivElement) {
		super({
			el,
			state: {
				message: 'Hello there',
				title: 'How are you today?',
				open: false
			}
		});
	}

	declare(): HTMLElement {
		return this.state.open ? this.open() : this.closed();
	}

	open(): HTMLElement {
		return html(
			`<div>
                <div class="dialog-title">
                    <p>${this.state.title}</p>
                </div>
                <div class="dialog-message">
                    <p>${this.state.message}</p>
                </div>
            </div>`
		);
	}

	closed(): HTMLElement {
		return html(`<div></div>`);
	}
}

// Create the dialog, and append it to the document's body.
let dialog: Dialog = new Dialog(el);
document.body.appendChild(el);