#include utility.js

const MszShowMessageBox = async (text, title, buttons, target) => {
    if(typeof text !== 'string')
        throw 'text must be a string';
    if(!(target instanceof Element))
        target = document.body;

    if(target.querySelector('.messagebox'))
        return false;

    if(typeof title !== 'string')
        title = 'Information';
    if(!Array.isArray(buttons))
        buttons = [];

    let buttonsElem;
    const html = <div class="messagebox">
        <div class="container messagebox__container">
            <div class="container__title">
                <div class="container__title__background"/>
                <div class="container__title__text">{title}</div>
            </div>
            <div class="container__content">{text}</div>
            {buttonsElem = <div class="messagebox__buttons"/>}
        </div>
    </div>;

    let firstButton;
    if(buttons.length < 1) {
        firstButton = <button class="input__button" onclick={() => html.remove()}>OK</button>;
        buttonsElem.appendChild(firstButton);
    } else {
        for(const button of buttons) {
            const buttonElem = <button class="input__button" onclick={() => { html.remove(); if(typeof button === 'function') button.callback(); }}>
                {button.text}
            </button>;
            buttonsElem.appendChild(buttonElem);

            if(firstButton === undefined)
                firstButton = buttonElem;
        }
    }

    target.appendChild(html);
    firstButton.focus();

    return true;
};