// View-settings modal: lets the user pick the folder listing's view style,
// sort key, and order, then persists them by POSTing to the folder with
// ?settings. Reuses openModal/closeModal and postReplace from page/actions.js.
function openViewSettings() {
    var btn = document.getElementById('view-settings-btn');
    var state = {
        view: (btn && btn.dataset.view) || 'list',
        sort: (btn && btn.dataset.sort) || 'name',
        order: (btn && btn.dataset.order) || 'asc'
    };

    // segmented builds a row of mutually-exclusive .btn toggles bound to a
    // single state key, marking the current choice with .is-active.
    function segmented(key, options) {
        var wrap = document.createElement('div');
        wrap.className = 'row gap-1';
        options.forEach(function (opt) {
            var b = document.createElement('button');
            b.type = 'button';
            b.className = 'btn';
            b.textContent = opt.label;
            if (state[key] === opt.value) b.classList.add('is-active');
            b.addEventListener('click', function () {
                state[key] = opt.value;
                wrap.querySelectorAll('button').forEach(function (x) {
                    x.classList.remove('is-active');
                });
                b.classList.add('is-active');
            });
            wrap.appendChild(b);
        });
        return wrap;
    }

    function field(labelText, control) {
        var row = document.createElement('div');
        row.className = 'col gap-1';
        var label = document.createElement('span');
        label.className = 'caption';
        label.textContent = labelText;
        row.appendChild(label);
        row.appendChild(control);
        return row;
    }

    var sortSelect = document.createElement('select');
    sortSelect.className = 'input';
    [['name', 'Name'], ['modified', 'Modified'], ['size', 'Size']].forEach(function (o) {
        var opt = document.createElement('option');
        opt.value = o[0];
        opt.textContent = o[1];
        if (state.sort === o[0]) opt.selected = true;
        sortSelect.appendChild(opt);
    });
    sortSelect.addEventListener('change', function () { state.sort = sortSelect.value; });

    var body = document.createElement('div');
    body.className = 'col';
    body.appendChild(field('View style', segmented('view', [
        { value: 'list', label: 'List' },
        { value: 'thumbnail', label: 'Thumbnail' }
    ])));
    body.appendChild(field('Sort by', sortSelect));
    body.appendChild(field('Order', segmented('order', [
        { value: 'asc', label: 'Asc' },
        { value: 'desc', label: 'Desc' }
    ])));

    openModal({
        title: 'View settings',
        body: body,
        confirm: {
            label: 'SAVE',
            onConfirm: function () {
                var action = window.location.pathname + '?settings';
                var formBody = 'view=' + encodeURIComponent(state.view) +
                    '&sort=' + encodeURIComponent(state.sort) +
                    '&order=' + encodeURIComponent(state.order);
                var target = window.location.pathname;
                closeModal();
                postReplace(action, formBody, target);
            }
        }
    });
}