import * as React from 'react';
import { color, COLORS, css, ObjectView } from '../common';
export class MyScreen extends React.PureComponent {
    render() {
        return React.createElement(this.RenderFrame, null, this.renderDebug());
    }
    renderDebug() {
        const styles = {
            base: css({
                width: 380,
                marginBottom: '8%',
            }),
            title: css({
                borderBottom: `solid 6px ${color.format(-0.1)}`,
                marginBottom: 8,
                Flex: 'horizontal-center-start',
            }),
            cell: css({
                backgroundColor: COLORS.BLUE,
                color: COLORS.WHITE,
                PaddingX: 8,
                PaddingY: 2,
                marginRight: 10,
                border: `solid 1px ${color.format(-0.05)}`,
            }),
        };
        const context = this.context;
        return (React.createElement("div", Object.assign({}, styles.base),
            React.createElement("div", Object.assign({}, styles.title),
                React.createElement("div", null, "type: MyScreen")),
            React.createElement(ObjectView, { name: 'context (env)', data: context })));
    }
    RenderFrame(props) {
        const styles = {
            base: css({
                backgroundColor: 'rgba(255, 255, 255, 0.6)',
                flex: 1,
            }),
            inner: css({
                Absolute: 40,
                border: `solid 1px ${color.format(-0.2)}`,
                Flex: 'center-center',
                backgroundColor: COLORS.WHITE,
                boxShadow: `0 0 8px 0 ${color.format(-0.1)}`,
            }),
        };
        return (React.createElement("div", Object.assign({}, styles.base),
            React.createElement("div", Object.assign({}, styles.inner), props.children)));
    }
}
