"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 = 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_1 = require("@storybook/react");
var storybook_chrome_screenshot_1 = require("storybook-chrome-screenshot");
var with_readme_1 = require("storybook-readme/with-readme");
var React = require("react");
var styled_components_1 = require("styled-components");
var __1 = require("../");
var ArcSlider_md_1 = require("./README/ArcSlider.md");
var Container = styled_components_1.default(__1.Box).attrs({
    m: 3
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 450px;\n"], ["\n  max-width: 450px;\n"])));
var HOC = (function (_super) {
    __extends(HOC, _super);
    function HOC(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            value: 0.6
        };
        _this.handleChange = function (value) {
            _this.setState({ value: value });
        };
        return _this;
    }
    HOC.prototype.render = function () {
        return (React.createElement(__1.ArcSlider, { value: this.state.value, onValueChange: this.handleChange },
            React.createElement("h2", null,
                Math.round(this.state.value * 100),
                "%")));
    };
    return HOC;
}(React.Component));
react_1.storiesOf('Core/ArcSlider', module)
    .addDecorator(with_readme_1.default(ArcSlider_md_1.default))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot())
    .add('Standard', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(Container, null,
            React.createElement(__1.ArcSlider, null))));
})
    .add('Fill color', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(Container, null,
            React.createElement(__1.ArcSlider, { fillColor: '#ff0000' }))));
})
    .add('Background color', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(Container, null,
            React.createElement(__1.ArcSlider, { background: '#ff0000' }))));
})
    .add('Label', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(Container, null,
            React.createElement(__1.ArcSlider, null,
                React.createElement("h2", null, "A label")))));
})
    .add('Change handler', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(Container, null,
            React.createElement(HOC, null))));
});
var templateObject_1;
