"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const React = require('react');
const ReactDOM = require('react-dom');
const typings = require('./page.type');
const mobx_react_1 = require('mobx-react');
const classNames = require('classnames');
const _ = require('lodash');
const src_1 = require('../../../../../common/auto-bind/src');
const left_bar_component_1 = require('./left-bar/left-bar.component');
const sidebar_tools_component_1 = require('./sidebar-tools/sidebar-tools.component');
const sidebar_tools_preview_component_1 = require('./sidebar-tools-preview/sidebar-tools-preview.component');
const footer_component_1 = require('./footer/footer.component');
const viewport_component_1 = require('./viewport/viewport.component');
const viewport_sidebar_resize_component_1 = require('./viewport-sidebar-resize/viewport-sidebar-resize.component');
const header_component_1 = require('./header/header.component');
const sidebar_addon_component_1 = require('./sidebar-addon/sidebar-addon.component');
const outer_move_box_component_1 = require('./outer-move-box/outer-move-box.component');
const src_2 = require('../../../../gaea-preview/src');
require('./page.scss');
let Page = class Page extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = new typings.State();
    }
    componentWillMount() {
        if (_.isEmpty(this.props.application.defaultValue)) {
            // 如果没有 defaultValue, 生成根节点
            this.props.viewport.createRootUniqueId();
            const LayoutClass = this.props.application.getComponentByUniqueKey('gaea-layout');
            // 布置最外层的画布
            let layoutProps = _.cloneDeep(LayoutClass.defaultProps);
            if (this.props.application.isReactNative) {
                layoutProps['flex'] = 1;
                layoutProps['overflowY'] = 'auto';
                layoutProps['flexDirection'] = 'column';
            }
            else {
                layoutProps['flexGrow'] = 1;
                layoutProps['flexDirection'] = 'column';
                layoutProps['display'] = 'block';
                layoutProps['overflow'] = null;
                layoutProps['overflowX'] = 'hidden';
                layoutProps['overflowY'] = 'auto';
            }
            this.props.viewport.setComponents(this.props.viewport.rootMapUniqueKey, {
                props: layoutProps,
                layoutChilds: [],
                parentMapUniqueKey: null
            });
        }
        else {
            // 有的话, 直接用 defaultValue
            Object.keys(this.props.application.defaultValue).forEach(mapUniqueKey => {
                const defaultInfo = this.props.application.defaultValue[mapUniqueKey];
                const ComponentClass = this.props.application.getComponentByUniqueKey(defaultInfo.props.gaeaUniqueKey);
                // 如果是根节点, 设置根据点 id
                if (defaultInfo.parentMapUniqueKey === null) {
                    this.props.viewport.setRootUniqueId(mapUniqueKey);
                }
                let props = _.cloneDeep(ComponentClass.defaultProps);
                defaultInfo.props && Object.keys(defaultInfo.props).forEach(propsKey => {
                    props[propsKey] = defaultInfo.props[propsKey];
                });
                this.props.viewport.setComponents(mapUniqueKey, {
                    props: props,
                    layoutChilds: defaultInfo.layoutChilds || [],
                    parentMapUniqueKey: defaultInfo.parentMapUniqueKey
                });
            });
        }
    }
    getSectionContainerRef(ref) {
        this.props.viewport.setSectionContainerDomInstance(ReactDOM.findDOMNode(ref));
    }
    render() {
        const sectionClasses = classNames({
            'section': true,
            'section-transition': !this.props.application.isSidebarMoving,
            'preview': this.props.application.isPreview
        });
        return (<div className="_namespace" style={{ height: this.props.application.height }}>

                <div style={{ width: this.props.application.sidebarWidth }} className="sidebar">
                    <sidebar_tools_component_1.default />
                    <sidebar_tools_preview_component_1.default />
                    <viewport_sidebar_resize_component_1.default />
                </div>

                <div className={sectionClasses}>
                    <header_component_1.default />

                    <div className="section-container" ref={this.getSectionContainerRef} style={{ height: `calc(100% - ${this.props.application.headerHeight + this.props.application.footerHeight}px)` }}>

                        <left_bar_component_1.default />

                        <div className="viewport-main-container">
                            <div className="viewport-main-content" style={{ width: `${this.props.application.viewportWidth}%` }}>
                                <viewport_component_1.default />
                                <outer_move_box_component_1.default />

                                {this.props.application.isPreview &&
            <div className="preview-container">
                                    <src_2.default value={this.props.viewport.getIncrementComponentsInfo()} baseComponents={this.props.application.baseComponents} customComponents={this.props.application.customComponents}/>
                                </div>}
                            </div>
                        </div>

                        <sidebar_addon_component_1.default />
                    </div>

                    <footer_component_1.default />
                </div>

            </div>);
    }
};
Page.defaultProps = new typings.Props();
__decorate([
    src_1.autoBindMethod
], Page.prototype, "getSectionContainerRef", null);
Page = __decorate([
    mobx_react_1.inject('viewport', 'application'),
    mobx_react_1.observer
], Page);
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Page;
//
// <Header height={this.props.application.headerHeight}>
//     <HeaderNav />
// </Header>