"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);
};
Object.defineProperty(exports, "__esModule", { value: true });
const core_1 = require("@angular/core");
const material_1 = require("@angular/material");
const store_1 = require("@ngrx/store");
const Observable_1 = require("rxjs/Observable");
const screenfull = require("screenfull");
const bundle_upload_service_1 = require("../bundle-upload.service");
const control_state_sync_service_1 = require("../frame/control-state-sync.service");
const devices_1 = require("../frame/devices");
const frame_component_1 = require("../frame/frame.component");
const channel_select_dialog_component_1 = require("../launch-dialog/channel-select-dialog.component");
const launch_dialog_component_1 = require("../launch-dialog/launch-dialog.component");
const link_dialog_component_1 = require("../link-dialog/link-dialog.component");
const project_1 = require("../redux/project");
const upload_schema_service_1 = require("../upload-schema/upload-schema.service");
/**
 * The host component holds the arrangement of macroscopic editor components.
 */
let FramePanelComponent = class FramePanelComponent {
    constructor(project, store, dialog, schema, bundle, controls, frame) {
        this.project = project;
        this.store = store;
        this.dialog = dialog;
        this.schema = schema;
        this.bundle = bundle;
        this.controls = controls;
        this.frame = this.store.select('frame');
        this.isMobile = this.frame.map(s => devices_1.devices[s.chosenDevice].isMobile);
        this.devices = devices_1.devices;
        this.isVersionLinked = this.store.map(s => !!s.sync.interactiveVersion);
        this.controlsReady = this.store.map(s => s.frame.controlsReady);
        /**
         * Whether the controls are currently connect to a remote server.
         */
        this.areControlsConnected = this.store.select(s => s.connect.state === 1 /* Active */);
        /**
         * Whether the current device supports fullscreen.
         */
        this.canFullscreen = screenfull.enabled;
        this.frameEl = frame.el.nativeElement;
        Observable_1.Observable.fromEvent(screenfull, 'change')
            .takeUntilDestroyed(this)
            .subscribe(() => {
            if (screenfull.isFullscreen) {
                this.frameEl.classList.add('fullscreen');
            }
            else {
                this.frameEl.classList.remove('fullscreen');
            }
        });
    }
    ngOnDestroy() {
        /* noop */
    }
    chooseDevice(index) {
        this.project.chooseDevice(index);
    }
    setReady(isReady) {
        this.project.setControlsReady(isReady);
    }
    rotateDevice() {
        this.project.rotateDevice();
    }
    setWidth(width) {
        this.project.resizeDevice(width);
    }
    setHeight(height) {
        this.project.resizeDevice(undefined, height);
    }
    unlink() {
        this.project.syncUnlink();
    }
    openLinkDialog() {
        this.dialog
            .open(link_dialog_component_1.LinkDialogComponent)
            .afterClosed()
            .subscribe(version => {
            this.project.syncLink(version);
        });
    }
    connect(ev) {
        if (!ev.shiftKey) {
            this.launch();
            return;
        }
        this.dialog
            .open(channel_select_dialog_component_1.ChannelSelectDialog)
            .afterClosed()
            .subscribe(launch => {
            if (launch) {
                this.launch();
            }
        });
    }
    uploadSchema() {
        this.schema.upload();
    }
    uploadBundle() {
        this.bundle.upload().catch(() => undefined);
    }
    /**
     * Disconnects controls from Interactive.
     */
    exitRemote() {
        this.project.disconnectControls();
    }
    /**
     * Forces the control iframe to refresh.
     */
    refresh() {
        this.controls.requestRefresh();
    }
    /**
     * Toggles fullscreen on the control frame.
     */
    fullscreen() {
        if (screenfull.isFullscreen) {
            screenfull.exit();
        }
        else {
            screenfull.request(document.querySelector('editor-frame'));
        }
    }
    launch() {
        this.dialog
            .open(launch_dialog_component_1.LaunchDialogComponent)
            .afterClosed()
            .subscribe(result => {
            if (result) {
                this.project.connectControls(result);
            }
        });
    }
};
FramePanelComponent = __decorate([
    core_1.Component({
        selector: 'editor-frame-panel',
        templateUrl: './frame-panel.component.html',
        styleUrls: ['./frame-panel.component.scss'],
        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
    }),
    __metadata("design:paramtypes", [project_1.ProjectService,
        store_1.Store,
        material_1.MatDialog,
        upload_schema_service_1.UploadSchemaService,
        bundle_upload_service_1.BundleUploadService,
        control_state_sync_service_1.ControlStateSyncService,
        frame_component_1.FrameComponent])
], FramePanelComponent);
exports.FramePanelComponent = FramePanelComponent;
