"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./../Drawboard/index");
var uuid_1 = require("./../../utils/uuid");
var types_1 = require("../../markers/types");
require("./index.less");
var dom_1 = require("../../utils/dom");
var prefix = 'fcw-page';
var WhitePage = (function () {
    function WhitePage(source, _a) {
        var _b = _a === void 0 ? {} : _a, mode = _b.mode, eventHub = _b.eventHub, parentContainer = _b.parentContainer;
        this.id = uuid_1.uuid();
        this.mode = 'master';
        if (mode) {
            this.mode = mode;
        }
        this.eventHub = eventHub;
        this.parentContainer = parentContainer;
        this.initSource(source);
        if (this.mode === 'master') {
            this.initMaster();
        }
        if (this.mode === 'mirror') {
            this.initMirror();
        }
    }
    WhitePage.prototype.open = function () {
        this.drawboard.open();
    };
    WhitePage.prototype.hide = function () {
        this.drawboard.hide();
    };
    WhitePage.prototype.show = function () {
        this.drawboard.show();
    };
    WhitePage.prototype.close = function () {
        this.drawboard.close();
    };
    WhitePage.prototype.initSource = function (source) {
        if (typeof source.imgSrc === 'string' && !this.parentContainer) {
            throw new Error('Invalid source, If you set image url, you must also set parentContainer');
        }
        this.source = source;
        if (source.imgEle) {
            this.target = source.imgEle;
        }
        if (typeof source.imgSrc === 'string') {
            this.container = dom_1.createDivWithClassName(prefix, this.parentContainer);
            this.container.id = this.id;
            this.target = document.createElement('img');
            this.target.src = source.imgSrc;
            this.target.alt = 'Siema image';
            this.container.appendChild(this.target);
        }
    };
    WhitePage.prototype.initMaster = function () {
        var _this = this;
        if (this.eventHub) {
            this.drawboard = new index_1.Drawboard({ imgEle: this.target }, {
                page: this,
                onChange: function (ev) { return _this.eventHub.emit('sync', ev); }
            });
        }
        else {
            this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this });
        }
    };
    WhitePage.prototype.initMirror = function () {
        var _this = this;
        if (!this.eventHub) {
            throw new Error('Invalid eventHub');
        }
        this.drawboard = new index_1.Drawboard({ imgEle: this.target }, { page: this });
        this.eventHub.on('sync', function (ev) {
            try {
                if (ev.target === 'page' && ev.id === _this.id) {
                    _this.onPageSync();
                }
                if (ev.target === 'marker') {
                    _this.onMarkerSync(ev);
                }
            }
            catch (e) {
                console.warn(e);
            }
        });
    };
    WhitePage.prototype.onPageSync = function () { };
    WhitePage.prototype.onMarkerSync = function (ev) {
        if (ev.event === 'add' && ev.parentId === this.id) {
            var data = ev.data;
            var marker = this.drawboard.markerMap[data.id];
            if (!marker) {
                this.drawboard.addMarker(types_1.getMarkerByType(data.type), { id: data.id });
            }
        }
        if (!ev.id) {
            return;
        }
        if (ev.event === 'remove') {
            var data = ev.data;
            var marker = this.drawboard.markerMap[data.id];
            if (marker) {
                this.drawboard.deleteMarker(marker);
            }
        }
        if (ev.event === 'move' || ev.event === 'resize') {
            var marker = this.drawboard.markerMap[ev.id];
            if (marker) {
                marker.reactToManipulation(ev.event, ev.data);
            }
        }
        if (ev.event === 'changeText') {
            var marker = this.drawboard.markerMap[ev.id];
            if (marker) {
                marker.setText(ev.data);
            }
        }
    };
    return WhitePage;
}());
exports.WhitePage = WhitePage;