export default class PreviewContentDialog extends HTMLDialogElement {
    #headingEl;
    #contentEl;
    #closeBtnEl;

    constructor() {
        super();
        this.#headingEl = this.querySelector('.modal-heading');
        this.#contentEl = this.querySelector('.modal-content');
        this.#closeBtnEl = this.querySelector('.modal-close');

        this.setHeading = this.setHeading.bind(this);
        this.setContent = this.setContent.bind(this);

        document.addEventListener('showPreviewContentModal',  (event) => {
            this.display(event.detail);
        });
        document.addEventListener('hidePreviewContentModal', (e) => this.close());
        this.#closeBtnEl.addEventListener('click', () => this.close());
    }

    setHeading(heading) {
        this.#headingEl.innerHTML = heading;
    }

    setContent(content) {
        this.#contentEl.innerHTML = content;
    }

    display({ heading, content }) {
        this.setHeading(heading);
        this.setContent(content);
        this.showModal();
    }
}