"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 uniq = require("lodash/uniq");
var react_1 = require("@storybook/react");
var addon_actions_1 = require("@storybook/addon-actions");
var storybook_chrome_screenshot_1 = require("storybook-chrome-screenshot");
var with_readme_1 = require("storybook-readme/with-readme");
var styled_components_1 = require("styled-components");
var _1 = require("../");
var pokedex_1 = require("./assets/pokedex");
var Readme = require("./README/Filters.md");
var StyledTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __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_2 || (templateObject_2 = __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 = addon_actions_1.action('Set views');
var setFiltersAction = addon_actions_1.action('Set filters');
var schema = {
    type: 'object',
    properties: {
        Name: {
            title: 'Pokemon Name',
            type: 'string'
        },
        Description: {
            type: 'string'
        },
        Abilities: {
            type: 'array',
            items: {
                type: 'string'
            }
        },
        Tag: {
            type: 'object',
            properties: {
                tag_name: {
                    title: 'Name',
                    description: 'key',
                    type: 'string'
                },
                tag_value: {
                    description: 'value',
                    title: 'Value',
                    type: 'string'
                }
            }
        },
        first_seen: {
            title: 'First Seen',
            type: 'string',
            format: 'date-time'
        },
        caught: {
            title: 'Has been caught',
            type: 'boolean'
        },
        biometrics: {
            type: 'object',
            properties: {
                Height: {
                    type: 'number'
                },
                Weight: {
                    type: 'number'
                }
            }
        },
        pokedex_number: {
            title: 'National pokedex number',
            type: 'number'
        },
        Category: {
            enum: uniq(pokedex_1.default.map(function (p) { return p.Category; }))
        }
    }
};
var FiltersDemo = (function (_super) {
    __extends(FiltersDemo, _super);
    function FiltersDemo(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            filters: []
        };
        return _this;
    }
    FiltersDemo.prototype.setViews = function (views) {
        setViewsAction(views);
        this.setState({ views: views });
    };
    FiltersDemo.prototype.setFilters = function (filters) {
        setFiltersAction(filters);
        this.setState({ filters: filters });
    };
    FiltersDemo.prototype.render = function () {
        var _this = this;
        var items = _1.SchemaSieve.filter(this.state.filters, pokedex_1.default);
        return (React.createElement("div", null,
            React.createElement(_1.Filters, __assign({ disabled: this.props.disabled, onFiltersUpdate: function (filters) { return _this.setFilters(filters); }, onViewsUpdate: function (views) { return _this.setViews(views); }, schema: schema, 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.biometrics.Height)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Weight"),
                            React.createElement("td", null, item.biometrics.Weight)),
                        React.createElement("tr", null,
                            React.createElement("td", null, "Abilities"),
                            React.createElement("td", null, item.Abilities.join(', '))),
                        React.createElement("tr", null,
                            React.createElement("td", null, "First Seen"),
                            React.createElement("td", null, item.first_seen
                                ? new Date(item.first_seen).toString()
                                : '')),
                        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('Core/Filters', module)
    .addDecorator(with_readme_1.default(Readme))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot())
    .add('Standard', function () {
    var props = {
        viewScopes: [
            {
                slug: 'bleh',
                name: 'bleh',
                label: 'bla'
            },
            {
                slug: 'foo',
                name: 'foo'
            }
        ]
    };
    return (React.createElement(_1.Provider, null,
        React.createElement(_1.Box, { m: 3 },
            React.createElement(FiltersDemo, { extra: props }))));
})
    .add('Disabled', function () {
    return (React.createElement(_1.Provider, null,
        React.createElement(_1.Box, { m: 3 },
            React.createElement(FiltersDemo, { disabled: true }))));
})
    .add('Button props', function () {
    var props = {
        addFilterButtonProps: {
            w: 200
        },
        viewsMenuButtonProps: {
            w: 200,
            danger: true
        }
    };
    return (React.createElement(_1.Provider, null,
        React.createElement(_1.Box, { m: 3 },
            React.createElement(FiltersDemo, { extra: props }))));
})
    .add('Dark', function () {
    return (React.createElement(_1.Provider, null,
        React.createElement(_1.Box, { bg: '#343434', p: 3 },
            React.createElement(FiltersDemo, { dark: true }))));
})
    .add('Render modes', function () {
    var dummyFilter = {
        $id: 'FuELaSmfCBqiV9hx',
        anyOf: [
            {
                $id: 'QXe1ev3KzutxZ0lK',
                title: 'is',
                description: 'Pokemon Name is Squirtle',
                type: 'object',
                properties: {
                    Name: {
                        title: 'Pokemon Name',
                        const: 'Squirtle'
                    }
                }
            }
        ]
    };
    return (React.createElement(_1.Provider, null,
        React.createElement(_1.Box, { p: 3 },
            React.createElement(_1.Heading.h3, null,
                React.createElement("code", null, "all")),
            React.createElement(_1.Filters, { schema: schema, renderMode: 'all' }),
            React.createElement(_1.Divider, { color: '#eee', mt: 40, mb: 90 }),
            React.createElement(_1.Heading.h3, null,
                React.createElement("code", null, "add")),
            React.createElement(_1.Filters, { schema: schema, renderMode: 'add' }),
            React.createElement(_1.Divider, { color: '#eee', mt: 40, mb: 90 }),
            React.createElement(_1.Heading.h3, null,
                React.createElement("code", null, "search")),
            React.createElement(_1.Filters, { schema: schema, renderMode: 'search' }),
            React.createElement(_1.Divider, { color: '#eee', mt: 40, mb: 90 }),
            React.createElement(_1.Heading.h3, null,
                React.createElement("code", null, "views")),
            React.createElement(_1.Filters, { schema: schema, renderMode: 'views' }),
            React.createElement(_1.Divider, { color: '#eee', mt: 40, mb: 90 }),
            React.createElement(_1.Heading.h3, null,
                React.createElement("code", null, "summary")),
            React.createElement(_1.Filters, { filters: [dummyFilter], schema: schema, renderMode: 'summary' }),
            React.createElement(_1.Divider, { color: '#eee', mt: 40, mb: 90 }),
            React.createElement(_1.Heading.h3, null, "You can also use an array of modes"),
            React.createElement(_1.Filters, { schema: schema, renderMode: ['add', 'search'] }),
            React.createElement(_1.Divider, { color: '#eee', mt: 40, mb: 90 }))));
});
var templateObject_1, templateObject_2;
