import * as tslib_1 from "tslib";
import ADialog from './ADialog';
import { uniqueId, forEach } from './utils';
import { getToolbarDialogAddons } from '../toolbar';
import { cssClass } from '../../styles';
/** @internal */
var SortDialog = /** @class */ (function (_super) {
    tslib_1.__extends(SortDialog, _super);
    function SortDialog(column, groupSortBy, dialog, ctx) {
        var _this = _super.call(this, dialog) || this;
        _this.column = column;
        _this.groupSortBy = groupSortBy;
        _this.ctx = ctx;
        _this.addons = getToolbarDialogAddons(_this.column, groupSortBy ? 'sortGroup' : 'sort', ctx);
        return _this;
    }
    SortDialog.prototype.build = function (node) {
        for (var _i = 0, _a = this.addons; _i < _a.length; _i++) {
            var addon = _a[_i];
            this.node.insertAdjacentHTML('beforeend', "<strong>" + addon.title + "</strong>");
            addon.append(this.column, this.node, this.dialog, this.ctx);
        }
        sortOrder(node, this.column, this.dialog.idPrefix, this.groupSortBy);
    };
    return SortDialog;
}(ADialog));
export default SortDialog;
function sortOrder(node, column, idPrefix, groupSortBy) {
    if (groupSortBy === void 0) { groupSortBy = false; }
    var ranking = column.findMyRanker();
    var current = groupSortBy ? ranking.getGroupSortCriteria() : ranking.getSortCriteria();
    var order = Object.assign({}, groupSortBy ? column.isGroupSortedByMe() : column.isSortedByMe());
    if (order.priority === undefined) {
        order.priority = current.length;
    }
    var id = uniqueId(idPrefix);
    node.insertAdjacentHTML('afterbegin', "\n        <strong>Sort Order</strong>\n        <label class=\"" + cssClass('checkbox') + "\"><input type=\"radio\" name=\"sortorder\" value=\"asc\"  " + ((order.asc === 'asc') ? 'checked' : '') + " ><span>Ascending</span></label>\n        <label class=\"" + cssClass('checkbox') + "\"><input type=\"radio\" name=\"sortorder\" value=\"desc\"  " + ((order.asc === 'desc') ? 'checked' : '') + " ><span>Decending</span></label>\n        <label class=\"" + cssClass('checkbox') + "\"><input type=\"radio\" name=\"sortorder\" value=\"none\"  " + ((order.asc === undefined) ? 'checked' : '') + " ><span>Unsorted</span></label>\n        <strong>Sort Priority</strong>\n        <input type=\"number\" id=\"" + id + "P\" step=\"1\" min=\"1\" max=\"" + (current.length + 1) + "\" value=\"" + (order.priority + 1) + "\">\n    ");
    var updateDisabled = function (disable) {
        forEach(node, 'input:not([name=sortorder]), select, textarea', function (d) {
            d.disabled = disable;
        });
    };
    updateDisabled(order.asc === undefined);
    var trigger = function () {
        if (groupSortBy) {
            ranking.groupSortBy(column, order.asc === 'asc', order.asc === undefined ? -1 : order.priority);
        }
        else {
            ranking.sortBy(column, order.asc === 'asc', order.asc === undefined ? -1 : order.priority);
        }
        updateDisabled(order.asc === undefined);
    };
    forEach(node, 'input[name=sortorder]', function (n) {
        n.addEventListener('change', function () {
            order.asc = n.value === 'none' ? undefined : n.value;
            trigger();
        }, {
            passive: true
        });
    });
    {
        var priority_1 = node.querySelector("#" + id + "P");
        priority_1.addEventListener('change', function () {
            order.priority = parseInt(priority_1.value, 10) - 1;
            trigger();
        }, {
            passive: true
        });
    }
}
//# sourceMappingURL=SortDialog.js.map