export function removeFlashMessagesTimeout(
    timeToLive = 6000,
    origin = 'server',
    type?: string
) {
    const messages = document.querySelector('#messages');
    if (!messages) {
        throw 'Message not found.';
    }
    const timeoutId = setTimeout(() => {
        removeFlashMessages(type, origin);
        clearTimeout(timeoutId);
    }, timeToLive);
}

function removeFlashMessages(type?: string, origin?: string) {
    let messageClass = '';
    if (type) {
        if (type == 'error') {
            messageClass = '.alert-danger';
        } else {
            messageClass = `.alert-${type}`;
        }
    } else {
        messageClass = '.alert';
    }

    let message,
        allMessages = document.querySelectorAll(messageClass);

    for (let i = 0; i < allMessages.length; i++) {
        message = allMessages[i];
        if (origin) {
            if (message.dataset.origin == origin) {
                message.remove();
            }
        } else {
            message.remove();
        }
    }
}

export function removeFlashMessageById(flashMessageId, timeToLive = 0) {
    const message = document.getElementById(flashMessageId);
    if (!message) {
        throw 'Message not found.';
    }
    if (timeToLive > 0) {
        const timeoutId = setTimeout(() => {
            message.remove();
            clearTimeout(timeoutId);
        }, timeToLive);
    }
}

function getFlashMessage(
    message,
    messageHeader,
    messageClass,
    messageIcon,
    flashMessageId
) {
    const flashMessage = `<div class="alert mmui-alert ${messageClass} fade show" role="alert" id="${flashMessageId}" data-origin="client">
            <div class="d-flex h-100">

                <div class="mmui-alert-icon">
                    <i class="fa ${messageIcon}"></i>
                </div>
                <div class="mmui-alert-message align-self-center">
                    <strong>${messageHeader}</strong> <br/> ${message}
                    <button type="button" class="close mmui-close" data-dismiss="alert" aria-label="Close">
                        <i class="fa fa-times-circle"></i>
                    </button>
                </div>

            </div>
        </div>`;

    return flashMessage;
}

export function createFlashMessenger(selector = '#messages') {
    const messages = document.querySelector(selector);
    if (!messages) {
        throw 'Message not found.';
    }

    return function (
        message,
        type = 'info',
        timeToLive = 0,
        mode = 'embedded'
    ) {
        let flashMessage, messageHeader, messageClass, messageIcon;

        switch (type) {
            case 'success':
                messageHeader = 'Success!';
                if (mode == 'embedded') {
                    messageClass = 'alert-success';
                } else {
                    messageClass = 'alert-success mmui-alert-floating';
                }
                messageIcon = 'fa-check-circle';
                break;
            case 'info':
                messageHeader = 'Info!';
                if (mode == 'embedded') {
                    messageClass = 'alert-info';
                } else {
                    messageClass = 'alert-info mmui-alert-floating';
                }
                messageIcon = 'fa-info-circle';
                break;
            case 'warning':
                messageHeader = 'Warning!';
                if (mode == 'embedded') {
                    messageClass = 'alert-warning';
                } else {
                    messageClass = 'alert-warning mmui-alert-floating';
                }
                messageIcon = 'fa-exclamation-triangle';
                break;
            case 'error':
                messageHeader = 'Error!';
                if (mode == 'embedded') {
                    messageClass = 'alert-danger';
                } else {
                    messageClass = 'alert-danger mmui-alert-floating';
                }
                messageIcon = 'fa-exclamation-circle';
                break;
            default:
                throw 'Invaild message type.';
        }
        const timestamp = new Date().getTime(),
            flashMessageId = `alert-${timestamp}`;
        flashMessage = getFlashMessage(
            message,
            messageHeader,
            messageClass,
            messageIcon,
            flashMessageId
        );
        messages.insertAdjacentHTML('afterbegin', flashMessage);

        if (timeToLive > 0) {
            removeFlashMessageById(flashMessageId, timeToLive);
        }
    };
}