import { AppObjectUC } from "@vived/core";
import { Vector2 } from "@vived/core";
import { BaseAppState } from "../../BaseApp/Entity/BaseAppState";
import { ChallengeEntity } from "../../Challenge/Entities/ChallengeEntity";
import { ZSpaceEntity } from "../../zSpace/Entities/ZSpaceEntity";
import { FramedScreenEntity } from "../Entities";
import { INSPECTOR_FRAMED_CONTAINER_ID, LEFT_LETTERBOX_FRAMED_CONTAINER_ID, LOWER_LETTERBOX_FRAMED_CONTAINER_ID, RENDER_CANVAS_FRAMED_CONTAINER_ID, RIGHT_LETTERBOX_FRAMED_CONTAINER_ID, SLIDE_INFO_FRAMED_CONTAINER_ID, TOOLBAR_FRAMED_CONTAINER_ID, UPPER_LETTERBOX_FRAMED_CONTAINER_ID, } from "../Factories/setupStandardFramedScreen";
export class StandardLayoutUC extends AppObjectUC {
    get challenge() {
        return this.getCachedSingleton(ChallengeEntity.type);
    }
    get consumptionSideBySideBreakWidth() {
        return (this.infoColumnWidth * 4 +
            this.toolbarWidth +
            this.infoOverlayMargin +
            2 * this.padding_x);
    }
    get infoContentLengthOverlayBreak() {
        if (!this.framedScreen) {
            return 0;
        }
        return 0.5 * this.framedScreen.screenHeight;
    }
    updatePositionForPadding() {
        if (!this.slideInfo ||
            !this.renderCanvas ||
            !this.inspector ||
            !this.toolbar ||
            !this.lowerLetterBox ||
            !this.upperLetterBox ||
            !this.leftLetterBox ||
            !this.rightLetterBox)
            return;
        if (this.slideInfo.show) {
            this.slideInfo.position = Vector2.Add(this.slideInfo.position, new Vector2(this.padding_x, 0));
        }
        if (this.renderCanvas.show) {
            this.renderCanvas.position = Vector2.Add(this.renderCanvas.position, new Vector2(this.padding_x, 0));
        }
        if (this.inspector.show) {
            this.inspector.position = Vector2.Add(this.inspector.position, new Vector2(this.padding_x, 0));
        }
        if (this.toolbar.show) {
            this.toolbar.position = Vector2.Add(this.toolbar.position, new Vector2(this.padding_x, 0));
        }
        if (this.lowerLetterBox.show) {
            this.lowerLetterBox.position = Vector2.Add(this.lowerLetterBox.position, new Vector2(this.padding_x, 0));
        }
        if (this.upperLetterBox.show) {
            this.upperLetterBox.position = Vector2.Add(this.upperLetterBox.position, new Vector2(this.padding_x, 0));
        }
        if (this.leftLetterBox.show) {
            this.leftLetterBox.position = Vector2.Add(this.leftLetterBox.position, new Vector2(this.padding_x, 0));
        }
        if (this.rightLetterBox.show) {
            this.rightLetterBox.position = Vector2.Add(this.rightLetterBox.position, new Vector2(this.padding_x, 0));
        }
    }
    layoutConsumptionOverlay(height, width) {
        if (!this.baseApp ||
            !this.slideInfo ||
            !this.renderCanvas ||
            !this.inspector ||
            !this.toolbar ||
            !this.lowerLetterBox ||
            !this.upperLetterBox ||
            !this.leftLetterBox ||
            !this.rightLetterBox)
            return;
        if (this.challenge?.selectedChallenge === "NONE" &&
            !this.baseApp.slideText) {
            this.disableContainer(this.slideInfo);
        }
        else {
            this.slideInfo.position = new Vector2(this.toolbarWidth + this.infoOverlayMargin, this.infoOverlayMargin);
            this.slideInfo.size = new Vector2(this.infoColumnWidth, -1);
            this.slideInfo.show = true;
        }
        this.toolbar.position = new Vector2(0, 0);
        this.toolbar.size = new Vector2(this.toolbarWidth, height);
        this.toolbar.show = true;
        const renderCanvasX = this.toolbarWidth;
        this.renderCanvas.position = new Vector2(renderCanvasX, 0);
        const canvasSize = width - this.toolbarWidth;
        this.renderCanvas.size = new Vector2(canvasSize, height);
        this.renderCanvas.show = true;
        this.disableContainer(this.inspector);
        this.disableContainer(this.lowerLetterBox);
        this.disableContainer(this.upperLetterBox);
        this.disableContainer(this.leftLetterBox);
        this.disableContainer(this.rightLetterBox);
        this.updatePositionForPadding();
    }
    layoutConsumptionSideBySide(height, width) {
        if (!this.baseApp ||
            !this.slideInfo ||
            !this.renderCanvas ||
            !this.inspector ||
            !this.toolbar ||
            !this.lowerLetterBox ||
            !this.upperLetterBox ||
            !this.leftLetterBox ||
            !this.rightLetterBox)
            return;
        if (this.challenge?.selectedChallenge === "NONE" &&
            !this.baseApp.slideText) {
            this.disableContainer(this.slideInfo);
            this.toolbar.position = new Vector2(0, 0);
            this.toolbar.size = new Vector2(this.toolbarWidth, height);
            this.toolbar.show = true;
            const renderCanvasX = this.toolbarWidth;
            this.renderCanvas.position = new Vector2(renderCanvasX, 0);
            const canvasSize = width - renderCanvasX;
            this.renderCanvas.size = new Vector2(canvasSize, height);
            this.renderCanvas.show = true;
        }
        else {
            this.slideInfo.position = Vector2.Zero();
            this.slideInfo.size = new Vector2(this.infoColumnWidth, height);
            this.slideInfo.show = true;
            this.toolbar.position = new Vector2(this.infoColumnWidth, 0);
            this.toolbar.size = new Vector2(this.toolbarWidth, height);
            this.toolbar.show = true;
            const renderCanvasX = this.infoColumnWidth + this.toolbarWidth;
            this.renderCanvas.position = new Vector2(renderCanvasX, 0);
            const canvasSize = width - renderCanvasX;
            this.renderCanvas.size = new Vector2(canvasSize, height);
            this.renderCanvas.show = true;
        }
        this.disableContainer(this.inspector);
        this.disableContainer(this.lowerLetterBox);
        this.disableContainer(this.upperLetterBox);
        this.disableContainer(this.leftLetterBox);
        this.disableContainer(this.rightLetterBox);
        this.updatePositionForPadding();
    }
    layoutForAuthoring(height, width) {
        if (!this.baseApp ||
            !this.slideInfo ||
            !this.renderCanvas ||
            !this.inspector ||
            !this.toolbar ||
            !this.lowerLetterBox ||
            !this.upperLetterBox ||
            !this.leftLetterBox ||
            !this.rightLetterBox)
            return;
        this.slideInfo.position = Vector2.Zero();
        this.slideInfo.size = new Vector2(this.infoColumnWidth, height);
        this.slideInfo.show = true;
        this.toolbar.position = new Vector2(this.infoColumnWidth, 0);
        this.toolbar.size = new Vector2(this.toolbarWidth, height);
        this.toolbar.show = true;
        let inspectorWidth = width - height - this.infoColumnWidth - this.toolbarWidth;
        if (inspectorWidth < this.inspectorColumnWidth_Min) {
            inspectorWidth = this.inspectorColumnWidth_Min;
        }
        else if (inspectorWidth > this.inspectorColumnWidth_Max) {
            inspectorWidth = this.inspectorColumnWidth_Max;
        }
        this.inspector.size = new Vector2(inspectorWidth, height);
        this.inspector.show = true;
        const renderCanvasX = this.infoColumnWidth + this.toolbarWidth;
        this.renderCanvas.position = new Vector2(renderCanvasX, 0);
        const canvasWidth = width - inspectorWidth - this.toolbarWidth - this.infoColumnWidth;
        this.renderCanvas.size = new Vector2(canvasWidth, height);
        this.renderCanvas.show = true;
        const inspectorX = this.infoColumnWidth + this.toolbarWidth + canvasWidth;
        this.inspector.position = new Vector2(inspectorX, 0);
        if (canvasWidth === height) {
            this.disableContainer(this.lowerLetterBox);
            this.disableContainer(this.upperLetterBox);
            this.disableContainer(this.leftLetterBox);
            this.disableContainer(this.rightLetterBox);
        }
        else if (canvasWidth < height) {
            const halfGap = Math.floor(0.5 * (height - canvasWidth));
            this.upperLetterBox.position = new Vector2(renderCanvasX, 0);
            this.upperLetterBox.size = new Vector2(canvasWidth, halfGap);
            this.upperLetterBox.show = true;
            this.lowerLetterBox.position = new Vector2(renderCanvasX, height - halfGap);
            this.lowerLetterBox.size = new Vector2(canvasWidth, halfGap);
            this.lowerLetterBox.show = true;
            this.disableContainer(this.leftLetterBox);
            this.disableContainer(this.rightLetterBox);
        }
        else if (canvasWidth > height) {
            const halfGap = Math.floor(0.5 * (canvasWidth - height));
            this.leftLetterBox.position = new Vector2(renderCanvasX, 0);
            this.leftLetterBox.size = new Vector2(halfGap, height);
            this.leftLetterBox.show = true;
            this.rightLetterBox.position = new Vector2(renderCanvasX + canvasWidth - halfGap, 0);
            this.rightLetterBox.size = new Vector2(halfGap, height);
            this.rightLetterBox.show = true;
            this.disableContainer(this.lowerLetterBox);
            this.disableContainer(this.upperLetterBox);
        }
        this.updatePositionForPadding();
    }
    layoutForZSpaceEmulation(height, width) {
        if (!this.baseApp ||
            !this.slideInfo ||
            !this.renderCanvas ||
            !this.inspector ||
            !this.toolbar ||
            !this.lowerLetterBox ||
            !this.upperLetterBox ||
            !this.leftLetterBox ||
            !this.rightLetterBox)
            return;
        this.renderCanvas.position = new Vector2(0, 0);
        this.renderCanvas.size = new Vector2(width, height);
        this.renderCanvas.show = true;
        this.disableContainer(this.slideInfo);
        this.disableContainer(this.toolbar);
        this.disableContainer(this.inspector);
        this.disableContainer(this.lowerLetterBox);
        this.disableContainer(this.upperLetterBox);
        this.disableContainer(this.leftLetterBox);
        this.disableContainer(this.rightLetterBox);
    }
    getContainerByID(id) {
        if (!this.framedScreen) {
            console.warn("No framed screen");
            return;
        }
        const container = this.framedScreen.getContainerByID(id);
        if (!container) {
            console.warn("Unable to find container by ID: " + container);
        }
        return container;
    }
    constructor(appObject) {
        super(appObject, StandardLayoutUC.type);
        this.padding_x = 0;
        this.toolbarWidth = 64;
        this.infoColumnWidth = 264;
        this.infoOverlayMargin = 24;
        this.inspectorColumnWidth_Min = 264;
        this.inspectorColumnWidth_Max = 528;
        this.updateLayout = () => {
            if (!this.framedScreen || !this.baseApp)
                return;
            const height = this.framedScreen.screenHeight;
            const width = this.framedScreen.screenWidth - 2 * this.padding_x;
            if (this.zSpaceEntity && this.zSpaceEntity.emulate) {
                this.layoutForZSpaceEmulation(this.framedScreen.screenHeight, this.framedScreen.screenWidth);
                return;
            }
            if (this.baseApp?.isAuthoring === true) {
                this.layoutForAuthoring(height, width);
                return;
            }
            if (this.framedScreen.screenWidth < this.consumptionSideBySideBreakWidth) {
                this.layoutConsumptionSideBySide(height, width);
                return;
            }
            if (this.baseApp.slideInfoContentHeight >
                this.infoContentLengthOverlayBreak ||
                this.baseApp.slideInfoContentHeight === 0) {
                this.layoutConsumptionSideBySide(height, width);
                return;
            }
            this.layoutConsumptionOverlay(height, width);
        };
        this.disableContainer = (container) => {
            container.show = false;
            container.position = Vector2.Zero();
            container.size = Vector2.Zero();
        };
        this.framedScreen = appObject.getComponent(FramedScreenEntity.type);
        if (!this.framedScreen) {
            this.appObjects.submitFatal("FramedScreenSizePM", "FramedScreenSizePM has been added to an App Object that does not have a FramedScreenEntity");
            throw new Error("No FramedScreenEntity");
        }
        this.slideInfo = this.getContainerByID(SLIDE_INFO_FRAMED_CONTAINER_ID);
        this.renderCanvas = this.getContainerByID(RENDER_CANVAS_FRAMED_CONTAINER_ID);
        this.inspector = this.getContainerByID(INSPECTOR_FRAMED_CONTAINER_ID);
        this.toolbar = this.getContainerByID(TOOLBAR_FRAMED_CONTAINER_ID);
        this.lowerLetterBox = this.getContainerByID(LOWER_LETTERBOX_FRAMED_CONTAINER_ID);
        this.upperLetterBox = this.getContainerByID(UPPER_LETTERBOX_FRAMED_CONTAINER_ID);
        this.leftLetterBox = this.getContainerByID(LEFT_LETTERBOX_FRAMED_CONTAINER_ID);
        this.rightLetterBox = this.getContainerByID(RIGHT_LETTERBOX_FRAMED_CONTAINER_ID);
        this.zSpaceEntity = ZSpaceEntity.get(this.appObjects);
        if (this.zSpaceEntity) {
            this.zSpaceEntity.addChangeObserver(this.updateLayout);
        }
        else {
            console.warn("Unable to find the zSpaceEntity");
            return;
        }
        this.baseApp = BaseAppState.get(this.appObjects);
        if (this.baseApp) {
            this.baseApp.addChangeObserver(this.updateLayout);
        }
        else {
            this.error("Unable to find base app");
            return;
        }
        this.framedScreen.addChangeObserver(this.updateLayout);
    }
}
StandardLayoutUC.type = "StandardLayoutUC";
//# sourceMappingURL=StandardLayoutUC.js.map