"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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
const mobx_react_1 = require("mobx-react");
const React = require("react");
const PiUtils_1 = require("../../util/PiUtils");
const Keys_1 = require("../../util/Keys");
const AliasBox_1 = require("../boxes/AliasBox");
const SelectBox_1 = require("../boxes/SelectBox");
const TextBox_1 = require("../boxes/TextBox");
const PiLogging_1 = require("../../util/PiLogging");
const Styles_1 = require("./styles/Styles");
const PiUtils_2 = require("../../util/PiUtils");
let SelectableComponent = class SelectableComponent extends React.Component {
    constructor(props) {
        super(props);
        this.setElement = (element) => {
            if (element) {
                this.element = element;
            }
        };
        this.onKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
            PiLogging_1.EVENT_LOG.info(this, "onKeyDown");
            const handled = yield PiUtils_1.PiUtils.handleKeyboardShortcut(Keys_1.reactToKey(e), this.props.box, this.props.editor);
            if (handled) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        this.onClick = (event) => __awaiter(this, void 0, void 0, function* () {
            PiLogging_1.EVENT_LOG.info(this, "===> changeShowNavigator (" + this.props.box.actualX + ", " + this.props.box.actualY + ") width " + this.props.box.actualWidth);
            if (this.props.box.selectable) {
                PiLogging_1.EVENT_LOG.info(this, "===> selected box " + this.props.box.role);
                this.props.editor.selectedBox = this.props.box;
                event.preventDefault();
                event.stopPropagation();
            }
        });
        this.componentDidUpdate = this.componentDidUpdate.bind(this);
    }
    componentDidMount() {
        return __awaiter(this, void 0, void 0, function* () {
            PiLogging_1.EVENT_LOG.info(this, "componentDidMount");
            yield this.updateViewStateAfterRender();
        });
    }
    componentDidUpdate() {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.updateViewStateAfterRender();
        });
    }
    render() {
        const selectedBox = this.props.editor.selectedBox;
        let style;
        let isSelected = !!this.props.box && !!selectedBox ? this.props.box.id === selectedBox.id : false;
        if (isSelected) {
            if (TextBox_1.isTextBox(selectedBox) || AliasBox_1.isAliasBox(selectedBox) || SelectBox_1.isSelectBox(selectedBox)) {
                style = Styles_1.STYLES.selectedTextComponent;
            }
            else {
                style = Styles_1.STYLES.selectedComponent;
            }
        }
        else {
            style = Styles_1.STYLES.unSelectedComponent;
        }
        if (TextBox_1.isTextBox(this.props.box) || AliasBox_1.isAliasBox(this.props.box) || SelectBox_1.isSelectBox(this.props.box)) {
            this.props.box.update = this.componentDidUpdate;
        }
        return (React.createElement("div", { className: style, tabIndex: 0, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: this.setElement }, this.props.children));
    }
    updateViewStateAfterRender() {
        return __awaiter(this, void 0, void 0, function* () {
            yield PiUtils_2.wait(0);
            if (this.element) {
                const box = this.props.box;
                const rect = this.element.getBoundingClientRect();
                box.actualX = rect.left;
                box.actualY = rect.top;
                box.actualHeight = rect.height;
                box.actualWidth = rect.width;
            }
        });
    }
};
SelectableComponent = __decorate([
    mobx_react_1.observer,
    __metadata("design:paramtypes", [Object])
], SelectableComponent);
exports.SelectableComponent = SelectableComponent;
//# sourceMappingURL=SelectableComponent.js.map