"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 React = require("react");
var react_1 = require("@storybook/react");
var styled_components_1 = require("styled-components");
var _1 = require("../");
var ProgressBar_1 = require("./ProgressBar");
var pokedex_1 = require("./assets/pokedex");
var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 30px;\n"], ["\n  margin: 30px;\n"])));
var cancelAction = react_1.action('Modal.cancel');
var secondaryAction = react_1.action('Modal.secondary');
var doneAction = react_1.action('Modal.done');
var ModalDemo = (function (_super) {
    __extends(ModalDemo, _super);
    function ModalDemo(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            show: false
        };
        return _this;
    }
    ModalDemo.prototype.render = function () {
        var _this = this;
        return (React.createElement(Container, null,
            React.createElement(_1.Button, { primary: true, onClick: function () { return _this.setState({ show: true }); } }, "Open Modal"),
            this.state.show && (React.createElement(_1.Modal, { title: 'Modal title', cancel: function () {
                    cancelAction();
                    _this.setState({ show: false });
                }, done: function (x) {
                    doneAction(x);
                    _this.setState({ show: false });
                } }, this.props.children || 'Lorem ipsum dolor sit amet'))));
    };
    return ModalDemo;
}(React.Component));
react_1.storiesOf('Modal', module)
    .addWithInfo('Standard', function () {
    return (React.createElement(_1.Modal, { title: 'Modal title', cancel: cancelAction, done: doneAction }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Custom action text', function () {
    return (React.createElement(_1.Modal, { title: 'Modal title', cancel: cancelAction, done: doneAction, action: 'Go!' }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('No cancel button', function () {
    return (React.createElement(_1.Modal, { title: 'Modal title', done: doneAction }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Title Details', function () {
    return (React.createElement(_1.Modal, { title: 'Modal title', titleDetails: 'Optional details', cancel: cancelAction, done: doneAction }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Custom Width', function () {
    return (React.createElement(_1.Modal, { w: 1000, title: 'Modal title', titleDetails: 'Optional details', cancel: cancelAction, done: doneAction }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Responsive Custom Width', function () {
    return (React.createElement(_1.Modal, { w: ['auto', 500, 1000], title: 'Modal title', titleDetails: 'Optional details', cancel: cancelAction, done: doneAction }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Multi Element Title', function () {
    return (React.createElement(_1.Modal, { titleElement: React.createElement("heading", null,
            React.createElement(_1.Heading.h3, null, "Heading"),
            React.createElement(ProgressBar_1.Progressor, { mb: 3, primary: true, value: 50 })), cancel: cancelAction, done: doneAction }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Secondary action', function () {
    return (React.createElement(_1.Modal, { w: ['auto', 500, 1000], title: 'Some info', secondaryButtonProps: {
            children: 'Refresh',
            onClick: secondaryAction
        }, done: doneAction, action: 'OK' }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Custom Button Properties', function () {
    return (React.createElement(_1.Modal, { w: ['auto', 500, 1000], title: 'Are you sure?', cancel: cancelAction, done: doneAction, action: 'Delete', cancelButtonProps: {
            children: 'Abort',
            w: 150,
            style: {
                marginRight: 30
            }
        }, primaryButtonProps: {
            w: 150,
            danger: true,
            primary: false,
            disabled: true
        } }, "Lorem ipsum dolor sit amet"));
})
    .addWithInfo('Open Modal Demo', function () {
    return React.createElement(ModalDemo, null);
})
    .addWithInfo('Overflow', function () {
    return (React.createElement("div", null,
        React.createElement(Container, null,
            React.createElement("h1", null, "This is page with long content that causes scrollbars to appear")),
        React.createElement(ModalDemo, null, pokedex_1.default.map(function (x, i) { return React.createElement("p", { key: i }, x.Description); })),
        React.createElement(Container, null, pokedex_1.default.map(function (x, i) { return React.createElement("p", { key: i }, x.Description); }))));
});
var templateObject_1;
