"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 React = require("react");
var react_1 = require("@storybook/react");
var uniq = require("lodash/uniq");
var styled_components_1 = require("styled-components");
var _1 = require("../");
var pokedex_1 = require("./assets/pokedex");
var sieve = _1.SchemaSieve();
var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 30px;\n"], ["\n  margin: 30px;\n"])));
var StyledTable = styled_components_1.default.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n\n  td {\n    border: 1px solid #eee;\n    padding: 3px 6px;\n  }\n"], ["\n  width: 100%;\n\n  td {\n    border: 1px solid #eee;\n    padding: 3px 6px;\n  }\n"])));
var TagBase = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: yellow;\n  border: 1px solid black;\n  border-radius: 3px;\n  padding: 3px 8px;\n  margin: 3px 5px;\n"], ["\n  background: yellow;\n  border: 1px solid black;\n  border-radius: 3px;\n  padding: 3px 8px;\n  margin: 3px 5px;\n"])));
var Tag = function (_a) {
    var tag = _a.tag;
    return (React.createElement(TagBase, null,
        tag.tag_name,
        ": ",
        tag.tag_value));
};
var setViewsAction = react_1.action('Set views');
var setRulesAction = react_1.action('Set rules');
var DateTimeDisplay = _1.PineTypes['Date Time'].Display;
var schema = {
    Name: {
        type: 'Short Text'
    },
    Category: {
        type: 'Enum',
        values: uniq(pokedex_1.default.map(function (p) { return p.Category; }))
    },
    Description: {
        type: 'Short Text'
    },
    Abilities: {
        type: 'Short Text'
    },
    Height: {
        type: 'Real'
    },
    Weight: {
        type: 'Real'
    },
    first_seen: {
        type: 'Date Time',
        label: 'First Seen'
    },
    pokedex_number: {
        type: 'Integer',
        label: 'National Pokedex Number'
    },
    caught: {
        type: 'Boolean',
        label: 'Pokemon has been caught'
    },
    Tag: {
        type: 'Key Value Pair',
        key: 'tag_name',
        value: 'tag_value',
        keyLabel: 'Name',
        valueLabel: 'Value'
    }
};
var FiltersDemo = (function (_super) {
    __extends(FiltersDemo, _super);
    function FiltersDemo(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            rules: [],
            views: [
                {
                    key: 'global',
                    scopeLabel: 'everyone',
                    title: 'Global',
                    data: []
                },
                {
                    key: 'user',
                    scopeLabel: 'just me',
                    title: 'User',
                    data: []
                }
            ],
            schema: schema
        };
        return _this;
    }
    FiltersDemo.prototype.setViews = function (views) {
        setViewsAction(views);
        this.setState({ views: views });
    };
    FiltersDemo.prototype.setRules = function (rules) {
        setRulesAction(rules);
        this.setState({ rules: rules });
    };
    FiltersDemo.prototype.render = function () {
        var _this = this;
        var items = sieve.filter(pokedex_1.default, this.state.rules);
        return (React.createElement("div", null,
            React.createElement(_1.Filters, __assign({ disabled: this.props.disabled, rules: this.state.rules, views: this.state.views, schema: this.state.schema, setViews: function (views) { return _this.setViews(views); }, setRules: function (rules) { return _this.setRules(rules); }, dark: this.props.dark }, this.props.extra)),
            items.map(function (item, index) { return (React.createElement("div", { key: index, style: { color: _this.props.dark ? 'white' : null } },
                React.createElement("h2", null, item.Name),
                React.createElement(StyledTable, null,
                    React.createElement("tbody", null,
                        React.createElement("tr", null,
                            React.createElement("td", null, "National PokeDex Number"),
                            React.createElement("td", null, item.pokedex_number)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Category"),
                            React.createElement("td", null, item.Category)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Height"),
                            React.createElement("td", null, item.Height)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Weight"),
                            React.createElement("td", null, item.Weight)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Abilities"),
                            React.createElement("td", null, item.Abilities)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "First Seen"),
                            React.createElement("td", null,
                                React.createElement(DateTimeDisplay, { data: item.first_seen }))),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Caught"),
                            React.createElement("td", null, item.caught ? 'yes' : 'no')),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Tags"),
                            React.createElement("td", null, !!item.Tag &&
                                item.Tag.map(function (tag, index) { return (React.createElement(Tag, { tag: tag, key: index })); }))))),
                React.createElement("p", null, item.Description))); })));
    };
    return FiltersDemo;
}(React.Component));
react_1.storiesOf('Filters', module)
    .addDecorator(function (story) { return React.createElement(Container, null, story()); })
    .addWithInfo('Standard', function () {
    return React.createElement(FiltersDemo, null);
})
    .addWithInfo('Disabled', function () {
    return React.createElement(FiltersDemo, { disabled: true });
})
    .addWithInfo('Button props', function () {
    var props = {
        addFilterButtonProps: {
            w: 200
        },
        viewsMenuButtonProps: {
            w: 200,
            danger: true
        }
    };
    return React.createElement(FiltersDemo, { extra: props });
})
    .addWithInfo('Dark', function () {
    return (React.createElement(_1.Box, { bg: '#343434', p: 30 },
        React.createElement(FiltersDemo, { dark: true })));
});
var templateObject_1, templateObject_2, templateObject_3;
