"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MyScreen = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var common_1 = require("../common");
var MyScreen = (function (_super) {
    tslib_1.__extends(MyScreen, _super);
    function MyScreen() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MyScreen.prototype.render = function () {
        return React.createElement(this.RenderFrame, null, this.renderDebug());
    };
    MyScreen.prototype.renderDebug = function () {
        var styles = {
            base: common_1.css({
                width: 380,
                marginBottom: '8%',
            }),
            title: common_1.css({
                borderBottom: "solid 6px " + common_1.color.format(-0.1),
                marginBottom: 8,
                Flex: 'horizontal-center-start',
            }),
            cell: common_1.css({
                backgroundColor: common_1.COLORS.BLUE,
                color: common_1.COLORS.WHITE,
                PaddingX: 8,
                PaddingY: 2,
                marginRight: 10,
                border: "solid 1px " + common_1.color.format(-0.05),
            }),
        };
        var context = this.context;
        return (React.createElement("div", tslib_1.__assign({}, styles.base),
            React.createElement("div", tslib_1.__assign({}, styles.title),
                React.createElement("div", null, "type: MyScreen")),
            React.createElement(common_1.ObjectView, { name: 'context (env)', data: context })));
    };
    MyScreen.prototype.RenderFrame = function (props) {
        var styles = {
            base: common_1.css({
                backgroundColor: 'rgba(255, 255, 255, 0.6)',
                flex: 1,
            }),
            inner: common_1.css({
                Absolute: 40,
                border: "solid 1px " + common_1.color.format(-0.2),
                Flex: 'center-center',
                backgroundColor: common_1.COLORS.WHITE,
                boxShadow: "0 0 8px 0 " + common_1.color.format(-0.1),
            }),
        };
        return (React.createElement("div", tslib_1.__assign({}, styles.base),
            React.createElement("div", tslib_1.__assign({}, styles.inner), props.children)));
    };
    return MyScreen;
}(React.PureComponent));
exports.MyScreen = MyScreen;
