"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var every = require("lodash/every");
var React = require("react");
var _1 = require("react-icons/lib/fa/");
var styled_components_1 = require("styled-components");
var Button_1 = require("../Button");
var Grid_1 = require("../Grid");
var Input_1 = require("../Input");
var Modal_1 = require("../Modal");
var PineTypes_1 = require("../PineTypes");
var Select_1 = require("../Select");
var Text_1 = require("../Text");
var FilterDescription_1 = require("./FilterDescription");
var SchemaSieve_1 = require("./SchemaSieve");
var sieve = SchemaSieve_1.default();
var BorderedDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tmargin-top: 15px;\n\tpadding: 6px 11px 0;\n\tborder: solid 1px #979797;\n"], ["\n\tmargin-top: 15px;\n\tpadding: 6px 11px 0;\n\tborder: solid 1px #979797;\n"])));
exports.isValidRule = function (rule) {
    return PineTypes_1.default.hasOwnProperty(rule.type);
};
var FilterSummary = (function (_super) {
    __extends(FilterSummary, _super);
    function FilterSummary(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            name: '',
            showForm: false,
            id: '',
            scope: props.views[0].key,
        };
        return _this;
    }
    FilterSummary.prototype.setExistingId = function (e) {
        var id = e.target.value;
        this.setState({ id: id });
    };
    FilterSummary.prototype.setViewScope = function (scope) {
        this.setState({ scope: scope });
    };
    FilterSummary.prototype.handleChange = function (e) {
        var name = e.target.value;
        this.setState({ name: name });
    };
    FilterSummary.prototype.save = function () {
        var _a = this.state, name = _a.name, id = _a.id, scope = _a.scope;
        if (!name && !id) {
            return;
        }
        this.props.saveView(name, scope);
        this.setState({
            name: '',
            showForm: false,
            id: '',
        });
    };
    FilterSummary.prototype.render = function () {
        var _this = this;
        if (every(this.props.rules, function (r) { return !exports.isValidRule(r); })) {
            return null;
        }
        return (React.createElement(BorderedDiv, null,
            React.createElement(Grid_1.Flex, { justify: "space-between" },
                React.createElement(Text_1.default, { fontSize: 13, mb: 10, color: this.props.dark && '#fff' },
                    "Filters (",
                    this.props.rules.length,
                    ")"),
                React.createElement(Button_1.default, { primary: true, plaintext: true, fontSize: 13, mt: -7, onClick: function () { return _this.setState({ showForm: !_this.state.showForm }); } },
                    React.createElement(_1.FaBookmarkO, { style: { marginRight: 6 } }),
                    "Save view")),
            this.state.showForm && (React.createElement(Modal_1.default, { title: "Save current view", cancel: function () { return _this.setState({ showForm: false }); }, done: function () { return _this.save(); }, action: "Save" },
                React.createElement("form", { onSubmit: function (e) { return e.preventDefault() || _this.save(); } },
                    this.props.views.length > 1 && (React.createElement(Grid_1.Flex, { mb: 30 },
                        React.createElement(Text_1.default, { width: 90 }, "Visible to:"),
                        React.createElement(Select_1.default, { ml: 10, mt: "-7px", width: "auto", value: this.state.scope, onChange: function (e) {
                                return _this.setViewScope(e.target.value);
                            } }, this.props.views.map(function (item) { return (React.createElement("option", { key: item.key, value: item.key }, item.scopeLabel)); })))),
                    React.createElement(Input_1.default, { width: "100%", value: this.state.name, placeholder: "Enter a name for the view", onChange: function (e) { return _this.handleChange(e); }, autoFocus: true })))),
            React.createElement(Grid_1.Flex, { wrap: true }, this.props.rules.map(function (rule) {
                if (!exports.isValidRule(rule)) {
                    return null;
                }
                return (React.createElement(Grid_1.Box, { mb: 10, mr: 10, key: rule.id },
                    React.createElement(FilterDescription_1.default, { dark: _this.props.dark, schema: _this.props.schema[rule.name], rule: rule, edit: rule.name === sieve.SIMPLE_SEARCH_NAME
                            ? false
                            : function () { return _this.props.edit(rule); }, delete: function () { return _this.props.delete(rule); } })));
            }))));
    };
    return FilterSummary;
}(React.Component));
exports.default = FilterSummary;
var templateObject_1;
