import * as tslib_1 from "tslib";
import { filterMissingMarkup, findFilterMissing } from '../missing';
import ADialog from './ADialog';
import { updateFilterState, forEach } from './utils';
import { cssClass } from '../../styles';
import { isCategoryIncluded } from '../../model/internalCategorical';
/** @internal */
var CategoricalFilterDialog = /** @class */ (function (_super) {
    tslib_1.__extends(CategoricalFilterDialog, _super);
    function CategoricalFilterDialog(column, dialog) {
        var _this = _super.call(this, dialog, {
            fullDialog: true
        }) || this;
        _this.column = column;
        _this.before = _this.column.getFilter() || { filter: _this.column.categories.map(function (d) { return d.name; }), filterMissing: false };
        return _this;
    }
    CategoricalFilterDialog.prototype.build = function (node) {
        var _this = this;
        node.insertAdjacentHTML('beforeend', "<div class=\"" + cssClass('dialog-table') + "\">\n        <label class=\"" + cssClass('checkbox') + " " + cssClass('dialog-filter-table-entry') + "\">\n          <input type=\"checkbox\" checked>\n          <span>\n            <span class=\"" + cssClass('dialog-filter-table-color') + "\"></span>\n            <div>Un/Select All</div>\n          </span>\n        </label>\n        " + this.column.categories.map(function (c) { return "<label class=\"" + cssClass('checkbox') + " " + cssClass('dialog-filter-table-entry') + "\">\n          <input data-cat=\"" + c.name + "\" type=\"checkbox\"" + (isCategoryIncluded(_this.before, c) ? 'checked' : '') + ">\n          <span>\n            <span class=\"" + cssClass('dialog-filter-table-color') + "\" style=\"background-color: " + c.color + "\"></span>\n            <div>" + c.label + "</div>\n          </span>\n        </label>"; }).join('') + "\n    </div>");
        // selectAll
        var selectAll = this.findInput('input:not([data-cat])');
        selectAll.onchange = function () {
            forEach(node, 'input[data-cat]', function (n) { return n.checked = selectAll.checked; });
        };
        node.insertAdjacentHTML('beforeend', filterMissingMarkup(this.before.filterMissing));
    };
    CategoricalFilterDialog.prototype.updateFilter = function (filter, filterMissing) {
        var noFilter = filter == null && filterMissing === false;
        updateFilterState(this.attachment, this.column, !noFilter);
        this.column.setFilter(noFilter ? null : { filter: filter, filterMissing: filterMissing });
    };
    CategoricalFilterDialog.prototype.reset = function () {
        this.forEach('input[data-cat]', function (n) { return n.checked = true; });
        this.updateFilter(null, false);
    };
    CategoricalFilterDialog.prototype.submit = function () {
        var f = this.forEach('input[data-cat]', function (n) { return n.checked ? n.dataset.cat : ''; }).filter(Boolean);
        if (f.length === this.column.categories.length) { // all checked = no filter
            f = null;
        }
        var filterMissing = findFilterMissing(this.node).checked;
        this.updateFilter(f, filterMissing);
        return true;
    };
    return CategoricalFilterDialog;
}(ADialog));
export default CategoricalFilterDialog;
//# sourceMappingURL=CategoricalFilterDialog.js.map