import * as tslib_1 from "tslib";
import ADialog from './ADialog';
import { cssClass } from '../../styles';
/** @internal */
var ChangeRendererDialog = /** @class */ (function (_super) {
    tslib_1.__extends(ChangeRendererDialog, _super);
    function ChangeRendererDialog(column, dialog, ctx) {
        var _this = _super.call(this, dialog) || this;
        _this.column = column;
        _this.ctx = ctx;
        return _this;
    }
    ChangeRendererDialog.prototype.build = function (node) {
        var _this = this;
        var current = this.column.getRenderer();
        var currentGroup = this.column.getGroupRenderer();
        var currentSummary = this.column.getSummaryRenderer();
        var _a = this.ctx.getPossibleRenderer(this.column), item = _a.item, group = _a.group, summary = _a.summary;
        console.assert(item.length > 1 || group.length > 1 || summary.length > 1); // otherwise no need to show this
        var byName = function (a, b) { return a.label.localeCompare(b.label); };
        node.insertAdjacentHTML('beforeend', "\n      <strong>Item Visualization</strong>\n      " + item.sort(byName).map(function (d) { return " <label class=\"" + cssClass('checkbox') + "\"><input type=\"radio\" name=\"renderer\" value=\"" + d.type + "\" " + ((current === d.type) ? 'checked' : '') + "><span>" + d.label + "</span></label>"; }).join('') + "\n      <strong>Group Visualization</strong>\n      " + group.sort(byName).map(function (d) { return " <label class=\"" + cssClass('checkbox') + "\"><input type=\"radio\" name=\"group\" value=\"" + d.type + "\" " + ((currentGroup === d.type) ? 'checked' : '') + "><span>" + d.label + "</span></label>"; }).join('') + "\n      <strong>Summary Visualization</strong>\n      " + summary.sort(byName).map(function (d) { return " <label class=\"" + cssClass('checkbox') + "\"><input type=\"radio\" name=\"summary\" value=\"" + d.type + "\" " + ((currentSummary === d.type) ? 'checked' : '') + "><span>" + d.label + "</span></label>"; }).join('') + "\n    ");
        this.forEach('input[name="renderer"]', function (n) {
            n.addEventListener('change', function () { return _this.column.setRenderer(n.value); }, { passive: true });
        });
        this.forEach('input[name="group"]', function (n) {
            n.addEventListener('change', function () { return _this.column.setGroupRenderer(n.value); }, { passive: true });
        });
        this.forEach('input[name="summary"]', function (n) {
            n.addEventListener('change', function () { return _this.column.setSummaryRenderer(n.value); }, { passive: true });
        });
    };
    return ChangeRendererDialog;
}(ADialog));
export default ChangeRendererDialog;
//# sourceMappingURL=ChangeRendererDialog.js.map