"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 __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __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;
    };
    return __assign.apply(this, arguments);
};
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 unstable_1 = require("../../unstable/");
var Markdown_1 = require("../../extra/Markdown");
require("../../extra/Form/mermaid");
require("../../extra/Form/markdown");
var Readme = require("../README/Form.md");
var extraWidgetsReadme = "\n# Extra widgets\nAdditional widgets for handling different formats can be loaded by importing\nthe relevant file from `renditon/dist/extra/Form/`.\n";
var basicPokedexSchema = {
    type: 'object',
    title: 'Pokèmon',
    properties: {
        Name: {
            type: 'string'
        },
        Height: {
            type: 'number'
        },
        Weight: {
            type: 'number'
        },
        Description: {
            type: 'string'
        },
        Category: {
            type: 'string'
        },
        Abilities: {
            type: 'string'
        },
        pokedex_number: {
            title: 'National Pokèdex Number',
            type: 'number'
        },
        caught: {
            type: 'boolean'
        },
        first_seen: {
            title: 'First seen',
            description: 'The first time you saw this pokèmon',
            type: 'string',
            format: 'date-time'
        },
        tags: {
            title: 'Tags',
            description: 'Add useful tags to your pokèmon',
            type: 'array',
            items: {
                type: 'string'
            }
        }
    }
};
var FormDemo = (function (_super) {
    __extends(FormDemo, _super);
    function FormDemo(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            formData: {}
        };
        _this.change = function (_a) {
            var formData = _a.formData;
            addon_actions_1.action('Form.onChange')(formData);
            _this.setState({ formData: formData });
        };
        _this.submit = function (data) {
            addon_actions_1.action('Form.onSubmit')(data);
        };
        return _this;
    }
    FormDemo.prototype.render = function () {
        return (React.createElement(__1.Flex, null,
            React.createElement(__1.Box, { flex: '1', m: 30 },
                React.createElement(unstable_1.Form, __assign({ onFormChange: this.change, onFormSubmit: this.submit, value: this.state.formData }, this.props))),
            React.createElement(__1.Box, { flex: '1', style: { maxWidth: '50%' }, p: 30 },
                React.createElement(__1.Txt, { monospace: true },
                    React.createElement("pre", null, JSON.stringify(this.state.formData, null, 4))))));
    };
    return FormDemo;
}(React.Component));
react_1.storiesOf('Beta/Form', module)
    .addDecorator(with_readme_1.default(Readme))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot())
    .add('Simple', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: basicPokedexSchema })));
})
    .add('Hidden submit button', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: basicPokedexSchema, hideSubmitButton: true })));
})
    .add('Custom submit button text', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: basicPokedexSchema, submitButtonText: 'Save' })));
})
    .add('UI schema', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: basicPokedexSchema, uiSchema: {
                'ui:order': ['Name', 'caught', 'Description', 'Abilities', '*']
            } })));
})
    .add('Preset values', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: basicPokedexSchema, value: {
                Name: 'Squirtle'
            } })));
})
    .add('Warnings', function () {
    var uiSchema = {
        Name: {
            'ui:warning': 'Once the `Name` is set it cannot be changed'
        }
    };
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: basicPokedexSchema, uiSchema: uiSchema })));
})
    .add('Group titles', function () {
    var schema = {
        type: 'object',
        title: 'Networking',
        properties: {
            vpn: {
                type: 'object',
                title: 'Virtual Private Network',
                properties: {
                    endpoint: {
                        title: 'Endpoint',
                        type: 'string'
                    },
                    certificate: {
                        title: 'Certificate',
                        type: 'string'
                    }
                }
            },
            wifiNetwork: {
                type: 'object',
                title: 'WiFi Network',
                properties: {
                    wifi: {
                        type: 'object',
                        properties: {
                            ssid: {
                                title: 'Network SSID',
                                type: 'string'
                            }
                        }
                    },
                    wifiSecurity: {
                        type: 'object',
                        properties: {
                            psk: {
                                title: 'Network Passphrase',
                                type: 'string'
                            }
                        }
                    }
                }
            }
        }
    };
    return (React.createElement(__1.Provider, null,
        React.createElement(FormDemo, { schema: schema })));
})
    .add('Extra widgets', function () {
    var extraSchema = {
        type: 'object',
        properties: {
            Mermaid: {
                type: 'string',
                format: 'mermaid'
            },
            Markdown: {
                type: 'string',
                format: 'markdown'
            }
        }
    };
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { px: 30, pt: 30 },
            React.createElement(Markdown_1.Markdown, null, extraWidgetsReadme)),
        React.createElement(FormDemo, { schema: extraSchema })));
});
