"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 = function (d, b) {
        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 extendStatics(d, b);
    };
    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 React = require("react");
var FaBookmarkO = require("react-icons/lib/fa/bookmark-o");
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 Select_1 = require("../Select");
var Txt_1 = require("../Txt");
var FilterDescription_1 = require("./FilterDescription");
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"])));
var FilterSummary = (function (_super) {
    __extends(FilterSummary, _super);
    function FilterSummary(props) {
        var _this = _super.call(this, props) || this;
        _this.save = function (event) {
            if (event) {
                event.preventDefault();
            }
            var _a = _this.state, name = _a.name, scope = _a.scope;
            if (!name) {
                return;
            }
            _this.props.saveView(name, scope);
            _this.setState({
                name: '',
                showForm: false,
                id: '',
            });
        };
        _this.state = {
            name: '',
            showForm: false,
            id: '',
            scope: _this.props.scopes ? _this.props.scopes[0].slug : null,
        };
        return _this;
    }
    FilterSummary.prototype.handleChange = function (e) {
        var name = e.target.value;
        this.setState({ name: name });
    };
    FilterSummary.prototype.render = function () {
        var _this = this;
        var scopes = this.props.scopes;
        return (React.createElement(BorderedDiv, null,
            this.state.showForm && (React.createElement(Modal_1.default, { title: "Save current view", cancel: function () { return _this.setState({ showForm: false }); }, done: this.save, action: "Save" },
                React.createElement("form", { onSubmit: this.save },
                    !!scopes && scopes.length > 1 && (React.createElement(Grid_1.Flex, { mb: 30 },
                        React.createElement(Txt_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.setState({
                                    scope: e.target.value,
                                });
                            } }, scopes.map(function (_a) {
                            var name = _a.name, slug = _a.slug;
                            return (React.createElement("option", { key: slug, value: slug }, name));
                        })))),
                    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, { justify: "space-between" },
                React.createElement(Txt_1.default, { fontSize: 13, mb: 10, color: this.props.dark ? '#fff' : undefined },
                    "Filters (",
                    this.props.filters.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(FaBookmarkO, { style: { marginRight: 6 } }),
                    "Save view")),
            React.createElement(Grid_1.Flex, { wrap: true }, this.props.filters.map(function (filter, index) {
                return (React.createElement(Grid_1.Box, { mb: 10, mr: 10, key: index },
                    React.createElement(FilterDescription_1.default, { dark: _this.props.dark, filter: filter, edit: function () { return _this.props.edit(filter); }, delete: function () { return _this.props.delete(filter); } })));
            }))));
    };
    return FilterSummary;
}(React.Component));
exports.default = FilterSummary;
var templateObject_1;
