/*
 * style-select.js
 * https://github.com/savetheinternet/Tinyboard/blob/master/js/style-select.js
 *
 * Changes the stylesheet chooser links to a <select>
 *
 * Released under the MIT license
 * Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
 * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
 *
 * Usage:
 *   $config['additional_javascript'][] = 'js/jquery.min.js';
 *   $config['additional_javascript'][] = 'js/style-select.js';
 */

$(document).ready(function() {
    let pages = $('div.pages');
    let stylesSelect = $('<select></select>').css({float:"none"});
    let options = [];

    let i = 1;
    for (styleName in styles) {
        if (styleName) {
            let opt = $('<option></option>')
                .html(styleName)
                .val(i);
            if (selectedstyle == styleName) {
                opt.attr('selected', true);
            }
            opt.attr('id', 'style-select-' + i);
            options.push([styleName.toUpperCase (), opt]);
            i++;
        }
    }

    options.sort((a, b) => {
        const keya = a [0];
        const keyb = b [0];
        if (keya < keyb) {
            return -1;
        }
        if (keya > keyb) {
            return 1;
        }
        return 0;
    }).forEach(([key, opt]) => {
        stylesSelect.append(opt);
    });

    stylesSelect.change(function() {
        let sel = $(this).find(":selected")[0];
        let styleName = sel.innerHTML;
        changeStyle(styleName, sel);
    });

    pages.after(
        $('<div id="style-select"></div>')
            .append(_('Select theme: '), stylesSelect)
    );
});