"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('./header.type');
const mobx_react_1 = require('mobx-react');
const src_1 = require('../../../../../../common/auto-bind/src');
const src_2 = require('../../../../../message/src');
const setting_component_1 = require('./setting/setting.component');
const keymaster = require('keymaster');
const classNames = require('classnames');
require('./header.scss');
let Header = class Header extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = new typings.State();
    }
    componentWillMount() {
        // 添加快捷键
        keymaster('ctrl+z', this.undo);
        keymaster('command+z', this.undo);
        keymaster('ctrl+shift+z', this.redo);
        keymaster('command+shift+z', this.redo);
        keymaster('ctrl+s', this.handleSave);
        keymaster('command+s', this.handleSave);
        keymaster('ctrl+c', this.copy);
        keymaster('command+c', this.copy);
        keymaster('ctrl+v', this.paste);
        keymaster('command+v', this.paste);
    }
    componentWillUnmount() {
        // 移除快捷键
        keymaster.unbind('ctrl+z');
        keymaster.unbind('command+z');
        keymaster.unbind('ctrl+shift+z');
        keymaster.unbind('command+shift+z');
        keymaster.unbind('ctrl+s');
        keymaster.unbind('command+s');
        keymaster.unbind('ctrl+c');
        keymaster.unbind('command+c');
        keymaster.unbind('ctrl+v');
        keymaster.unbind('command+v');
    }
    /**
     * 点击保存按钮
     */
    handleSave() {
        if (this.props.application.isPreview) {
            return;
        }
        // 获取增量编辑信息
        const componentsInfo = this.props.viewport.getIncrementComponentsInfo();
        this.props.application.event.emit(this.props.application.event.onSave, componentsInfo);
        return false;
    }
    /**
     * 点击预览按钮
     */
    handlePreview() {
        this.props.application.setPreview(!this.props.application.isPreview);
        if (this.props.application.isPreview) {
            // 隐藏附加侧边栏
            this.props.viewport.hideSidebarAddon();
            // 取消选择状态
            if (this.props.viewport.lastSelectMapUniqueKey) {
                this.props.application.event.emit(this.props.application.event.changeComponentSelectStatusEvent, {
                    mapUniqueKey: this.props.viewport.lastSelectMapUniqueKey,
                    selected: false
                });
            }
        }
    }
    /**
     * 回撤
     */
    undo() {
        if (this.props.application.isPreview) {
            return;
        }
        this.props.viewport.undo();
        return false;
    }
    /**
     * 重做
     */
    redo() {
        if (this.props.application.isPreview) {
            return;
        }
        this.props.viewport.redo();
        return false;
    }
    /**
     * 复制
     */
    copy() {
        if (this.props.application.isPreview) {
            return;
        }
        this.props.viewport.copy(this.props.viewport.hoveringComponentMapUniqueKey);
        return false;
    }
    /**
     * 粘贴
     */
    paste() {
        if (this.props.application.isPreview) {
            return;
        }
        if (!this.props.viewport.paste(this.props.viewport.hoveringComponentMapUniqueKey)) {
            src_2.default.warning('此处无法粘贴');
        }
        return false;
    }
    /**
     * 修改视图大小
     */
    handleChangeViewportWidth(width) {
        this.props.application.setViewportWidth(width);
    }
    handleChangeViewportWidthByRange(event) {
        this.props.application.setViewportWidth(Number(event.target.value));
    }
    render() {
        const undoClasses = classNames({
            'menu-item': true,
            'operate-disable': !this.props.viewport.canUndo
        });
        const redoClasses = classNames({
            'menu-item': true,
            'operate-disable': !this.props.viewport.canRedo
        });
        const mobileClasses = classNames({
            'menu-item': true,
            'viewport-size-active': this.props.application.viewportWidth === 40
        });
        const desktopClasses = classNames({
            'menu-item': true,
            'viewport-size-active': this.props.application.viewportWidth === 100
        });
        return (<div className="_namespace" height={this.props.application.headerHeight - 1}>
                <div className="left">
                    <div className="brand menu-item">{this.props.application.title}</div>
                    <setting_component_1.default />
                </div>

                <div className="right">
                    <div className="size-group">
                        <div className={mobileClasses} onClick={this.handleChangeViewportWidth.bind(this, 40)}><i className="fa fa-mobile"/></div>
                        <div className={desktopClasses} onClick={this.handleChangeViewportWidth.bind(this, 100)}><i className="fa fa-desktop"/>
                        </div>

                        <div className="slider-container">
                            <input onChange={this.handleChangeViewportWidthByRange} min="10" max="100" step="1" value={this.props.application.viewportWidth} className="slider" type="range"/>
                        </div>
                    </div>

                    <div className={undoClasses} onClick={this.undo}><i className="fa fa-undo"/></div>
                    <div className={redoClasses} onClick={this.redo}><i className="fa fa-rotate-right"/></div>
                    <div className="menu-item" onClick={this.handlePreview}>{this.props.application.isPreview ? '取消' : '预览'}</div>
                    <div className="menu-item" onClick={this.handleSave}>保存
                    </div>
                </div>
            </div>);
    }
};
Header.defaultProps = new typings.Props();
__decorate([
    src_1.autoBindMethod
], Header.prototype, "handleSave", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "handlePreview", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "undo", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "redo", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "copy", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "paste", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "handleChangeViewportWidth", null);
__decorate([
    src_1.autoBindMethod
], Header.prototype, "handleChangeViewportWidthByRange", null);
Header = __decorate([
    mobx_react_1.inject('application', 'viewport'),
    mobx_react_1.observer
], Header);
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Header;
// <Online key="online"/>