"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 typings = require('./basic.type');
const mobx_react_1 = require('mobx-react');
const classNames = require('classnames');
const src_1 = require('../../../../../../../common/auto-bind/src');
const src_2 = require('../../../../../../button/src');
const src_3 = require('../../../../../../checkbox/src');
const src_4 = require('../../../../../../input/src');
const remote_button_component_1 = require('./remote-button/remote-button.component');
const set_group_button_component_1 = require('./set-group-button/set-group-button.component');
const text_component_1 = require('./edit-components/text/text.component');
const select_component_1 = require('./edit-components/select/select.component');
const switch_component_1 = require('./edit-components/switch/switch.component');
const array_component_1 = require('./edit-components/array/array.component');
const margin_padding_component_1 = require('./edit-components/margin-padding/margin-padding.component');
require('./basic.scss');
let EditBoxBasic = class EditBoxBasic extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = new typings.State();
    }
    /**
     * 重置为默认属性
     */
    resetOptions() {
        this.props.viewport.resetComponent(this.props.viewport.currentEditComponentMapUniqueKey);
    }
    /**
     * 修改组件标题
     */
    handleChangeName(event) {
        this.componentInfo.props.gaeaName = event.target.value;
    }
    /**
     * 给标题输入框右侧增加删除按钮
     */
    titleInputRightRender() {
        // 根组件没有移除功能
        if (this.componentInfo.parentMapUniqueKey === null) {
            return null;
        }
        return (<remote_button_component_1.default />);
    }
    /**
     * 修改一个字段是否生效
     */
    handleToggleOptionEnable(editOption, checked) {
        editOption.isNull = !checked;
        if (!checked) {
            // 暂存非空的值
            editOption.notNullValue = this.componentInfo.props[editOption.field];
            this.props.viewport.updateComponentOptionsValue(editOption, null);
        }
        else {
            this.props.viewport.updateComponentOptionsValue(editOption, editOption.notNullValue);
        }
    }
    render() {
        if (!this.props.viewport.currentEditComponentMapUniqueKey) {
            return null;
        }
        // 绑定组件信息
        this.componentInfo = this.props.viewport.components.get(this.props.viewport.currentEditComponentMapUniqueKey);
        const Editors = this.componentInfo.props.gaeaEdit && this.componentInfo.props.gaeaEdit.map((editOption, index) => {
            const key = `${this.props.viewport.currentEditComponentMapUniqueKey}-${editOption.field}`;
            let EditElement = null;
            switch (editOption.editor) {
                case 'text':
                    EditElement = (<text_component_1.default editOption={editOption}/>);
                    break;
                case 'selector':
                    EditElement = (<select_component_1.default editOption={editOption}/>);
                    break;
                case 'switch':
                    EditElement = (<switch_component_1.default editOption={editOption}/>);
                    break;
                case 'array':
                    EditElement = (<array_component_1.default editOption={editOption}/>);
                    break;
                case 'marginPadding':
                    EditElement = (<margin_padding_component_1.default editOption={editOption}/>);
                    break;
            }
            const editLineLabelClasses = classNames({
                'edit-line-label': true,
                'disabled': editOption.isNull
            });
            return (<div key={key} className="edit-line-container">
                        <div className={editLineLabelClasses}>
                            {editOption.canNull &&
                <src_3.Checkbox checked={!editOption.isNull} onChange={this.handleToggleOptionEnable.bind(this, editOption)}/>}
                            {editOption.label}
                        </div>
                        <div className="edit-line-editor">
                            {EditElement}
                        </div>
                    </div>);
        });
        // 重置按钮,非根节点才有
        let ResetButton = null;
        if (this.componentInfo.parentMapUniqueKey !== null) {
            ResetButton = (<src_2.Button onClick={this.resetOptions}>重置</src_2.Button>);
        }
        // 成组按钮,有 childs 的 layout 元素且非根节点才有
        let GroupButton = null;
        if (this.componentInfo.props.gaeaUniqueKey === 'gaea-layout' && this.componentInfo.parentMapUniqueKey !== null) {
            GroupButton = (<set_group_button_component_1.default />);
        }
        return (<div className="_namespace">
                <div className="basic-title-container">
                    <div className="component-icon-container">
                        <i className={`fa fa-${this.componentInfo.props.gaeaIcon}`}/>
                    </div>
                    <src_4.default className="title-name" label="组件名" key={this.props.viewport.currentEditComponentMapUniqueKey} onChange={this.handleChangeName} rightRender={this.titleInputRightRender} value={this.componentInfo.props.gaeaName}/>
                </div>

                <div className="edit-item-container">
                    {Editors}
                </div>
                <div className="bottom-addon">
                    <src_2.ButtonGroup>
                        {ResetButton}
                        {GroupButton}
                    </src_2.ButtonGroup>
                </div>
            </div>);
    }
};
EditBoxBasic.defaultProps = new typings.Props();
__decorate([
    src_1.autoBindMethod
], EditBoxBasic.prototype, "resetOptions", null);
__decorate([
    src_1.autoBindMethod
], EditBoxBasic.prototype, "handleChangeName", null);
__decorate([
    src_1.autoBindMethod
], EditBoxBasic.prototype, "titleInputRightRender", null);
EditBoxBasic = __decorate([
    mobx_react_1.inject('viewport', 'application'),
    mobx_react_1.observer
], EditBoxBasic);
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = EditBoxBasic;