"use strict";
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 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 __1 = require("../");
var ProgressBar_1 = require("./ProgressBar");
var pokedex_1 = require("./assets/pokedex");
var Modal_md_1 = require("./README/Modal.md");
var cancelAction = addon_actions_1.action('Modal.cancel');
var secondaryAction = addon_actions_1.action('Modal.secondary');
var doneAction = addon_actions_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(__1.Box, { m: 3 },
            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 || (React.createElement("div", null,
                React.createElement("p", null, "Lorem ipsum dolor sit amet"),
                React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition")))))));
    };
    return ModalDemo;
}(React.Component));
react_1.storiesOf('Core/Modal', module)
    .addDecorator(with_readme_1.default(Modal_md_1.default))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot({ viewport: { height: 768 } }))
    .add('Standard', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { title: 'Modal title', cancel: cancelAction, done: doneAction },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Custom action text', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { title: 'Modal title', cancel: cancelAction, done: doneAction, action: 'Go!' },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('No cancel button', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { title: 'Modal title', done: doneAction },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Title Details', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { title: 'Modal title', titleDetails: 'Optional details', cancel: cancelAction, done: doneAction },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Custom Width', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { w: 1000, title: 'Modal title', titleDetails: 'Optional details', cancel: cancelAction, done: doneAction },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Responsive Custom Width', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { w: ['auto', 500, 1000], title: 'Modal title', titleDetails: 'Optional details', cancel: cancelAction, done: doneAction },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Multi Element Title', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { titleElement: React.createElement(React.Fragment, null,
                React.createElement(__1.Heading.h3, null, "Heading"),
                React.createElement(ProgressBar_1.Progressor, { mb: 3, primary: true, value: 50 })), cancel: cancelAction, done: doneAction },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Secondary action', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Modal, { w: ['auto', 500, 1000], title: 'Some info', secondaryButtonProps: {
                children: 'Refresh',
                onClick: secondaryAction
            }, done: doneAction, action: 'OK' },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
})
    .add('Custom Button Properties', function () {
    return (React.createElement(__1.Provider, null,
        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
            } },
            React.createElement("p", null, "Lorem ipsum dolor sit amet"),
            React.createElement("a", { href: 'https://balena-io-modules.github.io/rendition/', target: '_blank' }, "Rendition"))));
});
react_1.storiesOf('Core/Modal', module)
    .addDecorator(with_readme_1.default(Modal_md_1.default))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot())
    .add('Open Modal Demo', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(ModalDemo, null)));
})
    .add('Overflow', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Heading.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(__1.Box, { m: 3 }, pokedex_1.default.map(function (x, i) { return (React.createElement("p", { key: i }, x.Description)); }))));
})
    .add('With Tooltip', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Heading.h1, null, "The text inside the modal has a tooltip.")),
        React.createElement(ModalDemo, null,
            React.createElement(__1.Heading.h5, { tooltip: { text: 'Good job!', trigger: 'hover' } }, "Hover me and a tooltip will be displayed."))));
});
