"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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("@storybook/react");
var React = __importStar(require("react"));
var Input_1 = require("./Input");
var InputGroup_1 = require("./InputGroup");
var RadioInput_1 = require("./RadioInput");
var InputWithButton_1 = require("./InputWithButton");
var ImageFileToDataUri_1 = require("./ImageFileToDataUri");
var SubmitLink_1 = require("./SubmitLink");
var ControlComponent = /** @class */ (function (_super) {
    __extends(ControlComponent, _super);
    function ControlComponent(props) {
        var _this = _super.call(this, props) || this;
        _this.onChange = function (name, value) {
            var _a;
            console.log("change: ", name, value);
            _this.setState((_a = {}, _a[name] = value, _a));
        };
        _this.state = {};
        return _this;
    }
    ControlComponent.prototype.render = function () {
        return this.props.children(this.state, this.onChange);
    };
    return ControlComponent;
}(React.Component));
react_1.storiesOf("Pattern Library / Inputs", module)
    .add("Text Input", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(Input_1.TextInput, { label: "Text Input", placeholder: "Enter a value", name: "TextInput", onChange: onChange })); }));
})
    .add("Input Group", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(InputGroup_1.InputGroup, { prepend: "CVL", label: "Input Group with Prepend Text", placeholder: "Enter a value", name: "TextInput", onChange: onChange })); }));
})
    .add("Header Input", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(Input_1.HeaderInput, { label: "Header Input", placeholder: "I am a header input", name: "HeaderInput", onChange: onChange })); }));
})
    .add("Currency Input", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(Input_1.CurrencyInput, { label: "Currency Input", placeholder: "$0.00", name: "CurrencyInput", onChange: onChange })); }));
})
    .add("Radio Input", function () {
    var result;
    var onChange = function (name, value) {
        console.log("Radio Input change", name, value, result.RadioGroup.value);
    };
    return (React.createElement("div", null,
        React.createElement(RadioInput_1.RadioInput, { onChange: onChange, label: "Group of radio buttons", name: "RadioGroup", inputRef: function (ref) { return (result = ref); } },
            React.createElement(RadioInput_1.RadioButton, { value: "daily" }, "Daily"),
            React.createElement(RadioInput_1.RadioButton, { value: "weekly" }, "Weekly"),
            React.createElement(RadioInput_1.RadioButton, { value: "monthly" }, "Monthly"),
            React.createElement(RadioInput_1.RadioButton, { value: "yearly" }, "Yearly"))));
})
    .add("Textarea Input", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(Input_1.TextareaInput, { label: "Textarea Input", placeholder: "Input your long text", name: "TextareaInput", onChange: onChange })); }));
})
    .add("Text Input With Button", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(InputWithButton_1.TextInputWithButton, { placeholder: "Enter a thing", name: "TextInputWithButton", onChange: onChange, buttonText: "Click Me", onButtonClick: function () { return console.log("TextInputWithButton button was clicked"); } })); }));
})
    .add("Currency Input With Button", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(InputWithButton_1.CurrencyInputWithButton, { placeholder: "Enter an amount", name: "CurrencyInputWithButton", onChange: onChange, buttonText: "Click Me", icon: React.createElement(React.Fragment, null, "CVL"), onButtonClick: function () { return console.log("CurrencyInputWithButton button was clicked"); } })); }));
})
    .add("image file to data uri", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) {
        return React.createElement(ImageFileToDataUri_1.ImageFileToDataUri, { onChange: function (dataUri) { return onChange("name", dataUri); } });
    }));
})
    .add("Submit a link", function () {
    return (React.createElement(ControlComponent, null, function (state, onChange) { return (React.createElement(SubmitLink_1.SubmitLink, { name: "submit link", submitting: false, success: false, error: false, onChange: onChange, onSubmit: function () { return console.log("Link submitted"); } })); }));
});
//# sourceMappingURL=Input.stories.js.map