import { DynamicBehaviorType } from '../../model/shared/dynamic-display/dynamic-behavior-type';
import { DynamicDisplay } from '../../model/shared/dynamic-display/dynamic-display';
import { ConditionalDisplayElement } from './conditional-display-element';
import { GuiConsts } from '../../shared';
export class ConditionalDynamicDisplayElement extends ConditionalDisplayElement {
    constructor(element, permissionChecker, variableCommunicator, variableStore, signalRAppId) {
        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
        this.variableCommunicator = variableCommunicator;
        this.variableStore = variableStore;
        this.initDynamicBehavior();
    }
    initDynamicBehavior() {
        this.ang = 0;
        if (this.model.version >= 1 && this.model.dynamicSetting != null) {
            const location = this.getActualLocation();
            const strokeWidth = this.model.strokeWidth ? this.model.strokeWidth : 0;
            this.hor = location.x - Number(strokeWidth) / 2;
            this.ver = location.y - Number(strokeWidth) / 2;
            const behavior = new DynamicDisplay(this.model.dynamicSetting, this.variableCommunicator, this.variableStore, location, this.signalRAppId);
            behavior.doBehavior.subscribe(result => {
                if (this.model.angle) {
                    this.ang = Number(this.model.angle);
                }
                if (result.behaviorType === DynamicBehaviorType.HorizontalTranslation) {
                    this.hor = Number(result.translation) - Number(strokeWidth) / 2;
                }
                else if (result.behaviorType === DynamicBehaviorType.VerticalTranslation) {
                    this.ver = Number(result.translation) - Number(strokeWidth) / 2;
                }
                else if (result.behaviorType === DynamicBehaviorType.Rotation) {
                    if (this.model.angle) {
                        this.ang += Number(result.angel);
                    }
                    else {
                        this.ang = Number(result.angel);
                    }
                }
                const cosVal = Math.cos(this.ang * Math.PI / 180), sinVal = Math.sin(this.ang * Math.PI / 180);
                if (this.model.version >= 2) {
                    const size = this.getActualSize();
                    if (size === undefined) {
                        this.x = this.hor;
                        this.y = this.ver;
                    }
                    else {
                        switch (this.model.fixedPositionType) {
                            case 0:
                                this.x = this.hor;
                                this.y = this.ver;
                                break;
                            case 1:
                                this.x = this.hor + size.width / 2;
                                this.y = this.ver;
                                break;
                            case 2:
                                this.x = this.hor + size.width;
                                this.y = this.ver;
                                break;
                            case 3:
                                this.x = this.hor;
                                this.y = this.ver + size.height / 2;
                                break;
                            case 4:
                                this.x = this.hor + size.width / 2;
                                this.y = this.ver + size.height / 2;
                                break;
                            case 5:
                                this.x = this.hor + size.width;
                                this.y = this.ver + size.height / 2;
                                break;
                            case 6:
                                this.x = this.hor;
                                this.y = this.ver + size.height;
                                break;
                            case 7:
                                this.x = this.hor + size.width / 2;
                                this.y = this.ver + size.height;
                                break;
                            case 8:
                                this.x = this.hor + size.width;
                                this.y = this.ver + size.height;
                                break;
                        }
                    }
                    let isOldData = true;
                    if ((this.model.category === GuiConsts.components.meterKey || this.model.category === GuiConsts.components.switchIndicatorLightKey
                        || this.model.category === GuiConsts.components.imageKey) && this.model.version > 4) {
                        isOldData = false;
                    }
                    else if (this.model.category === GuiConsts.components.toggleViewKey && this.model.version > 5) {
                        isOldData = false;
                    }
                    else if (!(this.model.category === GuiConsts.components.meterKey || this.model.category === GuiConsts.components.switchIndicatorLightKey
                        || this.model.category === GuiConsts.components.imageKey || this.model.category === GuiConsts.components.toggleViewKey) && this.model.version > 3) {
                        isOldData = false;
                    }
                    else {
                        isOldData = true;
                    }
                    if (isOldData) {
                        this.rotatedHor = (this.hor - this.x) * cosVal - (this.ver - this.y) * sinVal + this.x;
                        this.rotatedVer = (this.hor - this.x) * sinVal + (this.ver - this.y) * cosVal + this.y;
                    }
                    else {
                        this.rotatedHor = (this.hor - this.x) * cosVal - (this.ver - this.y) * sinVal + this.hor;
                        this.rotatedVer = (this.hor - this.x) * sinVal + (this.ver - this.y) * cosVal + this.ver;
                    }
                    this.transform = 'matrix(' + cosVal.toFixed(6) + ',' + sinVal.toFixed(6) + ','
                        + (-1 * sinVal).toFixed(6) + ',' + cosVal.toFixed(6) + ',' + this.rotatedHor + ',' + this.rotatedVer + ')';
                    this.rootElement.style('-webkit-transform', this.transform);
                }
                else {
                    this.transform = 'matrix(' + cosVal.toFixed(6) + ',' + sinVal.toFixed(6) + ','
                        + (-1 * sinVal).toFixed(6) + ',' + cosVal.toFixed(6) + ',' + this.hor + ',' + this.ver + ')';
                    this.rootElement.style('-webkit-transform', this.transform);
                }
            });
        }
    }
    getActualSize() {
        return this.model.size;
    }
    getActualLocation() {
        return this.model.location;
    }
    isBold(fontStyle) {
        return fontStyle && fontStyle.indexOf('bold') !== -1;
    }
    isItalic(fontStyle) {
        return fontStyle && fontStyle.indexOf('Italic') !== -1;
    }
    fontFamily(fontStyle) {
        if (!fontStyle) {
            return null;
        }
        const isBold = this.isBold(fontStyle) ? 1 : 0;
        const isItalic = this.isItalic(fontStyle) ? 1 : 0;
        const fontSettings = fontStyle.split(' ');
        const fontFamilyIndex = isBold + isItalic + 1;
        return fontSettings.length > fontFamilyIndex ? fontSettings[fontFamilyIndex] : null;
    }
}
