"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 __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var cloneDeep = require("lodash/cloneDeep");
var React = require("react");
var fa_1 = require("react-icons/lib/fa");
var styled_components_1 = require("styled-components");
var DropDownButton_1 = require("../DropDownButton");
var Grid_1 = require("../Grid");
var Text_1 = require("../Text");
var FilterDescription_1 = require("./FilterDescription");
var SchemaSieve_1 = require("./SchemaSieve");
var Summary_1 = require("./Summary");
var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
var UnstyledList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tlist-style: none;\n\tpadding: 0 !important;\n\tmargin: 0;\n"], ["\n\tlist-style: none;\n\tpadding: 0 !important;\n\tmargin: 0;\n"])));
var PlainPanel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tborder-radius: 2px;\n\tbackground-color: #ffffff;\n\tbox-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);\n\tborder: solid 1px #9b9b9b;\n"], ["\n\tborder-radius: 2px;\n\tbackground-color: #ffffff;\n\tbox-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);\n\tborder: solid 1px #9b9b9b;\n"])));
var Preview = styled_components_1.default(PlainPanel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tdisplay: none;\n\tposition: absolute;\n\tright: 230px;\n\twidth: 300px;\n\tright: 100%;\n\tmargin-right: 3px;\n\ttop: 2px;\n\tpadding: 15px 15px 5px;\n"], ["\n\tdisplay: none;\n\tposition: absolute;\n\tright: 230px;\n\twidth: 300px;\n\tright: 100%;\n\tmargin-right: 3px;\n\ttop: 2px;\n\tpadding: 15px 15px 5px;\n"])));
var ViewListItem = styled_components_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tposition: relative;\n\tpadding: 7px 40px 7px 20px;\n\t&:hover {\n\t\tbackground-color: #f3f3f3;\n\t}\n\t& > p {\n\t\tpadding-right: 20px;\n\t}\n\t& > button {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tright: 2px;\n\t\tpadding: 8px;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tdisplay: none;\n\t\tcursor: pointer;\n\t}\n\t&:hover > button {\n\t\tdisplay: block;\n\t\topacity: 0.7;\n\t}\n\t> button:hover {\n\t\topacity: 1;\n\t}\n\t&:hover ", " {\n\t\tdisplay: block;\n\t}\n"], ["\n\tposition: relative;\n\tpadding: 7px 40px 7px 20px;\n\t&:hover {\n\t\tbackground-color: #f3f3f3;\n\t}\n\t& > p {\n\t\tpadding-right: 20px;\n\t}\n\t& > button {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\tright: 2px;\n\t\tpadding: 8px;\n\t\tbackground: none;\n\t\tborder: none;\n\t\tdisplay: none;\n\t\tcursor: pointer;\n\t}\n\t&:hover > button {\n\t\tdisplay: block;\n\t\topacity: 0.7;\n\t}\n\t> button:hover {\n\t\topacity: 1;\n\t}\n\t&:hover ", " {\n\t\tdisplay: block;\n\t}\n"])), Preview);
var ViewListItemLabel = styled_components_1.default(Text_1.default)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tcursor: pointer;\n"], ["\n\tcursor: pointer;\n"])));
var ViewsMenu = (function (_super) {
    __extends(ViewsMenu, _super);
    function ViewsMenu(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            showViewsMenu: false,
        };
        return _this;
    }
    ViewsMenu.prototype.loadView = function (view) {
        var rules = cloneDeep(view.rules);
        this.props.setRules(rules);
        this.setState({ showViewsMenu: false });
    };
    ViewsMenu.prototype.render = function () {
        var _this = this;
        var views = this.props.views;
        var hasViews = views.length > 0 &&
            views.reduce(function (sum, item) { return sum + item.data.length; }, 0) > 0;
        return (React.createElement(Wrapper, null,
            React.createElement(DropDownButton_1.default, __assign({ disabled: this.props.disabled, primary: true, outline: true, joined: true, alignRight: true, noListFormat: true, label: React.createElement("span", null,
                    React.createElement(fa_1.FaPieChart, { style: { marginRight: 10 } }),
                    "Views") }, this.props.buttonProps),
                React.createElement(Grid_1.Box, { py: 1 },
                    !hasViews && (React.createElement(Grid_1.Box, { py: 2, px: 3 }, "You haven't created any views yet")),
                    hasViews &&
                        views.map(function (scope) {
                            if (!scope.data || !scope.data.length) {
                                return;
                            }
                            return (React.createElement(Grid_1.Box, { key: scope.key },
                                !!scope.title && (React.createElement(Text_1.default, { fontSize: 13, ml: 20, mb: 2, mt: 2, color: "#aaa" }, scope.title)),
                                React.createElement(UnstyledList, null, scope.data.map(function (view) {
                                    var rules = view.rules.filter(function (rule) {
                                        return Summary_1.isValidRule(rule) ||
                                            rule.name === SchemaSieve_1.SIMPLE_SEARCH_NAME;
                                    });
                                    return (React.createElement(ViewListItem, { key: view.name },
                                        React.createElement(ViewListItemLabel, { m: 0, onClick: function () { return _this.loadView(view); } },
                                            view.name,
                                            React.createElement("br", null),
                                            React.createElement(Text_1.default, { m: 0, fontSize: 12, color: "#aaa" },
                                                rules.length,
                                                " filter",
                                                rules.length > 1 && 's')),
                                        React.createElement("button", { onClick: function () {
                                                return _this.props.deleteView(view, scope.key);
                                            } },
                                            React.createElement(fa_1.FaTrash, { name: "trash" })),
                                        React.createElement(Preview, null, rules.map(function (rule) { return (React.createElement(Grid_1.Box, { mb: 10, key: rule.id },
                                            React.createElement(FilterDescription_1.default, { schema: _this.props.schema[rule.name], rule: rule }))); }))));
                                }))));
                        })))));
    };
    return ViewsMenu;
}(React.Component));
exports.default = ViewsMenu;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
