var states = [];
//TODO: Remember to move these to a separate lib.
function createElement(type, className, content) {
    var element = document.createElement(type);
    element.className = className;
    if (content) {
        if (content instanceof Element) {
            element.appendChild(content);
        } else {
            element.innerText = content;
        }
    }
    return element;
}

function createDiv(className, content) {
    return createElement("div", className, content);
}

function createTitle(title) {
    var spanTitle = createElement("span", "", title);
    return createDiv("drop-title", spanTitle);
}

function createButton(title, event) {
    var button = createElement("div", "button");

    if (title instanceof Array) {
        button.appendChild(createElement("span", "", title[0] + " " + title[1]));

        button.className = "button " + title[1].toLowerCase();
                    

        button.onclick = function (e) {
            event(e, title); // Additiona info inject
        }
    } else {
        button.appendChild(createElement("span", "", title));
        button.onclick = function (e) {
            event(e, title); // Additiona info inject
        }
    }

    return button;
}

function dropDown(root, title, list, clickEvent) {
    var contentGroup = document.createElement("div");
    contentGroup.className = "content-group unfurl";

    var dropElement = document.createElement("div");
    dropElement.className = "drop-down";

    var ids = {};
    var titleElement = createTitle(title);
    contentGroup.appendChild(titleElement);

    var listElement = createElement("div", "content-wrap");

    for (var i = 0; i < list.length; i++) {
        var button = createButton(list[i], clickEvent);
        if (list[i] instanceof Array) {
            ids[list[i][0]] = button;
        } else {
            ids[list[i]] = button;
        }
        listElement.appendChild(button);
    }
    listElement.appendChild(createElement("div", "clear"))
    dropElement.append(listElement);
    contentGroup.append(dropElement);

    root.appendChild(contentGroup);

    titleElement.onclick = function (e) {
        if (contentGroup.className.indexOf("unfurl") === -1) {
            contentGroup.className = "content-group unfurl";
            dropElement.style.maxHeight = listElement.clientHeight;
        } else {
            contentGroup.className = "content-group";
            dropElement.style.maxHeight = 0;
        }
    };
    dropElement.style.maxHeight = listElement.clientHeight;
    return ids;
}

var emitEvent = function (event, message = "") {
    if (EventBridge) {
        EventBridge.emitWebEvent(JSON.stringify({
            type: event,
            message: message
        }));
    } else {
        console.info("Attempted to emit event", event, message);
    }
}
var playback = function (e, info) {
    if (info instanceof Array) {
        emitEvent("emote_app_play", info[0]);
    } else {
        emitEvent("emote_app_play", info);
    }
}

var toggle = function (e, info) {
    if (info instanceof Array) {
        emitEvent("emote_app_toggle", info[0]);

    } else {
        emitEvent("emote_app_toggle", info);
    }
}