import * as tslib_1 from "tslib";
import { round } from '../../internal';
import { isCategoryIncluded } from '../../model/internalCategorical';
import { filterMissingMarkup, findFilterMissing } from '../missing';
import ADialog from './ADialog';
import { updateFilterState, forEach } from './utils';
import { cssClass } from '../../styles';
/** @internal */
var CategoricalMappingFilterDialog = /** @class */ (function (_super) {
    tslib_1.__extends(CategoricalMappingFilterDialog, _super);
    function CategoricalMappingFilterDialog(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;
    }
    CategoricalMappingFilterDialog.prototype.build = function (node) {
        var _this = this;
        var joint = this.column.categories.map(function (d) { return Object.assign({
            range: round(d.value * 100, 2)
        }); });
        joint.sort(function (a, b) { return a.label.localeCompare(b.label); });
        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            <div>Un/Select All</div>\n          </span>\n        </label>\n        " + joint.map(function (_a) {
            var name = _a.name, color = _a.color, label = _a.label, range = _a.range;
            return "\n          <label class=\"" + cssClass('checkbox') + " " + cssClass('dialog-filter-table-entry') + "\">\n            <input data-cat=\"" + name + "\" type=\"checkbox\"" + (isCategoryIncluded(_this.before, name) ? 'checked' : '') + ">\n            <span>\n              <input type=\"number\" value=\"" + range + "\" min=\"0\" max=\"100\" size=\"5\">\n              <div class=\"" + cssClass('dialog-filter-color-bar') + "\">\n                <span style=\"background-color: " + color + "; width: " + range + "%\"></span>\n              </div>\n              <div>" + label + "</div>\n            </span>\n          </label>";
        }).join('') + "\n    </div>");
        // selectAll
        var selectAll = this.findInput('input[type=checkbox]:not([data-cat])');
        selectAll.onchange = function () {
            forEach(node, '[data-cat]', function (n) { return n.checked = selectAll.checked; });
        };
        this.forEach('input[type=number]', function (d) {
            d.oninput = function () {
                d.nextElementSibling.firstElementChild.style.width = d.value + "%";
            };
        });
        node.insertAdjacentHTML('beforeend', filterMissingMarkup(this.before.filterMissing));
    };
    CategoricalMappingFilterDialog.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 });
    };
    CategoricalMappingFilterDialog.prototype.reset = function () {
        this.forEach('[data-cat]', function (n) {
            n.checked = false;
            n.nextElementSibling.value = '50';
        });
        this.updateFilter(null, false);
        this.column.setMapping(this.column.categories.map(function () { return 1; }));
    };
    CategoricalMappingFilterDialog.prototype.submit = function () {
        var items = this.forEach('input[data-cat]', function (n) { return ({
            checked: n.checked,
            cat: n.dataset.cat,
            range: n.nextElementSibling.valueAsNumber
        }); });
        var f = items.filter(function (d) { return d.checked; }).map(function (d) { return d.cat; });
        if (f.length === this.column.categories.length) { // all checked = no filter
            f = null;
        }
        var filterMissing = findFilterMissing(this.node).checked;
        this.updateFilter(f, filterMissing);
        this.column.setMapping(items.map(function (d) { return d.range / 100; }));
        return true;
    };
    return CategoricalMappingFilterDialog;
}(ADialog));
export default CategoricalMappingFilterDialog;
//# sourceMappingURL=CategoricalMappingFilterDialog.js.map