"use strict";
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 __());
    };
})();
var __assign = (this && this.__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;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var _1 = require("../../");
var unstable_1 = require("../../unstable");
var TabbedBox_1 = require("../../unstable/components/Form/widgets/TabbedBox");
var Markdown_1 = require("../Markdown");
var Widget = (function (_super) {
    __extends(Widget, _super);
    function Widget() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.handleChange = function (_a) {
            var value = _a.target.value;
            return _this.props.onChange(value === '' ? _this.props.options.emptyValue : value);
        };
        _this.handleBlur = function (event) {
            if (_this.props.onBlur) {
                _this.props.onBlur(_this.props.id, event.target.value);
            }
        };
        _this.handleFocus = function (event) {
            if (_this.props.onFocus) {
                _this.props.onFocus(_this.props.id, event.target.value);
            }
        };
        return _this;
    }
    Widget.prototype.render = function () {
        var _a = this.props, value = _a.value, readonly = _a.readonly, disabled = _a.disabled, autofocus = _a.autofocus, onBlur = _a.onBlur, onFocus = _a.onFocus, options = _a.options, schema = _a.schema, formContext = _a.formContext, inputProps = __rest(_a, ["value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "options", "schema", "formContext"]);
        return (React.createElement(TabbedBox_1.TabbedBox, { tabs: ['Write', 'Preview'], help: React.createElement(_1.Link, { fontSize: 2, href: 'https://guides.github.com/features/mastering-markdown/', blank: true }, "About markdown") },
            React.createElement(_1.Textarea, __assign({ placeholder: "This text supports markdown", readOnly: readonly, disabled: disabled, autoFocus: autofocus, value: value || '' }, inputProps, { onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, rows: 5 })),
            React.createElement(Markdown_1.Markdown, { p: 3, style: {
                    borderRadius: _1.Theme.radius,
                    width: '100%',
                    minHeight: 180,
                } }, value)));
    };
    return Widget;
}(React.Component));
unstable_1.Form.registerWidget('markdown', Widget);
