import { OnInit, Component, Output, EventEmitter, Input, ViewChild } from '@angular/core';
import { environment } from '../../environments/environment';
import { UserService } from '../../service/common/user.service';
import { TranslateService } from '@ngx-translate/core';
import { UserRoleService } from '../../service/common/user-role.service';
import { ShowViewerArgs } from '../../models/viewer/ShowViewerArgs.model';
import { ExtensionInterface } from '../../models/viewer/ExtensionInterface.model';
import { CORE } from '../../models/viewer/CORE.model';
declare var $: any;

@Component({
    selector: 'stp-configure',
    templateUrl: './stp-configure.component.html',
    styleUrls: ['./stp-configure.component.scss']
})

export class StpConfigureComponent implements OnInit {
    @ViewChild('armsConfigure') armsConfigure;
    //@ViewChild('armsConfigure2') armsConfigure2;
    @ViewChild('profilesConfigure') profilesConfigure;
    @ViewChild('rodConfigure') rodConfigure;
    @Input() args: ShowViewerArgs;
    @Output() onShowViewer: EventEmitter<ShowViewerArgs> = new EventEmitter();
    maximized = false;
    viewerIframeId = 'viewerIframe';
    CORE: CORE = null;
    ExtensionInterface: ExtensionInterface = null;
    public currentTab: string;

    constructor(private user: UserService,
        private translate: TranslateService,
        private userRoleService: UserRoleService
    ) { }

    ngOnInit(): void {
        this.initView();
    }
    initView() {
        const useProd = environment.production === true;
        const rootPath = '/viewer-lib/';

        ///////
        if (useProd === true) {
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'viewer.min.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'js/lib/bootstrap-switch/bootstrap-switch.min.css">');
        } else {
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'css/override.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'css/VIEWUI.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'css/VIEWUI.popups.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'css/VIEWUI.properties.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'css/VIEWUI.viewTree.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'css/dark-theme.css" type="text/css" />');
            $('head').append('<link rel="stylesheet" href="' + rootPath + 'js/lib/bootstrap-switch/bootstrap-switch.min.css">');
        }

        let innerHtml = '<div style="width: calc(100vw); height: height: calc(100vh - 2px)"><div id="canvasesContainer" style="width: 100%; height: 100%"></div></div>';
        innerHtml += '<script src="/viewer-lib/js/lib/jquery.min.js"></script>';
        innerHtml += `<script type="text/javascript">
        initViewerLibrary = function(subProjectId, apiUri, constraintsUri, authData, lang, parent, useProd, viewerLoadingStart, angularEnvName, hideIcon) {
            $.getScript('/viewer-lib/js/lib/jquery-ui/jquery-ui.min.js').done(function () {
                $.getScript('/viewer-lib/js/loader.js').done(function () {
                    $('#canvasesContainer').constructionViewer({
                        rootPath: '/viewer-lib/',
                        disableLoadAndSave: false,
                        loadResources: true,
                        showObjectList: false,
                        showToolbar: false,
                        demoMode: false,
                        useOrthographicProjection: true,
                        hideWorkplane: true,
                        subProjectId: subProjectId,
                        apiUri: apiUri,
                        constraintsUri: constraintsUri,
                        authData: authData,
                        language: lang,
                        useProd: useProd,
                        viewerLoadingStart: viewerLoadingStart,
                        angularEnvName: angularEnvName,
                        hideIcon: hideIcon,
                        callback: ((state) => Extension.loadStp('` + this.args.itemId + `', '` + this.args.itemType + `', '` + this.args.variantId + `'))
                    });
                });
            })    
            .fail(function (jqxhr, settings, exception) {
                console.error('CONSTRUCTION VIEWER preloader: loader.js loading failed, error: ' + exception);
            });
        }
        </script>
        <style type="text/css">@import url(https://fonts.googleapis.com/icon?family=Material+Icons);</style>`;

        let ifrm = (<any>document.getElementById(this.viewerIframeId));
        ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
        ifrm.document.open();
        ifrm.document.write(innerHtml);
        ifrm.document.close();

        const subProjectId = 0;
        const apiUri = environment.serviceUrl;
        const constraintsUri = environment.constraintsUrl;
        const authData = this.user.authentication;
        let lang = this.translate.currentLang;
        if (!lang) {
            lang = this.translate.getDefaultLang();
        }
        lang = "en";
        const parent = this;
        const viewerLoadingStart = performance.now();
        const angularEnvName = environment.envName;
        const hideIcon = !(this.userRoleService.canPerformCalculations());

        let startViewerTaskCounter = 50;
        let viewerStarted = false;
        const startViewerTask = setInterval(() => {
            if ('initViewerLibrary' in ifrm) {
                ifrm.initViewerLibrary(subProjectId, apiUri, constraintsUri, authData, lang, parent, useProd, viewerLoadingStart, angularEnvName, hideIcon);
                startViewerTaskCounter = 0;
                viewerStarted = true;
            } else {
                startViewerTaskCounter--;
            }
            if (startViewerTaskCounter === 0) {
                clearInterval(startViewerTask);
                if (!viewerStarted) {
                    alert('Viewer could not be loaded in time. Please reload the page or restart the browser.');
                }
            }
        }, 200);

        let getCoreTaskCounter = 75;
        let coreFound = false;
        let context = this;
        let windowOpen = window.open;
        const getCoreTask = setInterval(() => {
            if ('CORE' in ifrm && 'ExtensionInterface' in ifrm) {
                context.CORE = ifrm.CORE;
                context.ExtensionInterface = ifrm.ExtensionInterface;
                context.ExtensionInterface.isVariantChoosen = (this.args.variantId !== null);
                context.CORE.parentWindowOpen = windowOpen;
                if (this.args.itemType === 'PIPE_RING') {
                    context.currentTab = context.ExtensionInterface.isVariantChoosen ? 'PIPE_CONFIGURE' : 'ROD_CONFIGURE';
                    // context.currentTab = 'PIPE_CONFIGURE';
                } else {
                    context.currentTab = context.ExtensionInterface.isVariantChoosen ? 'PROFILE' : 'POSITION';
                }
                context.CORE.isAuthenticatedFunc = function () {
                    return context.user.isAuthenticated;
                };
                getCoreTaskCounter = 0;
                coreFound = true;
            } else {
                getCoreTaskCounter--;
            }
            if (getCoreTaskCounter === 0) {
                clearInterval(getCoreTask);
                if (!coreFound) {
                    alert('Viewer could not be loaded in time. Please reload the page or restart the browser.');
                }
            }
        }, 200);
    }

    calculateHeight() {
        if (this.maximized === true) {
            return 'calc(100vh - 48px)';
        } else {
            return 'calc(100vh - 150px)';
        }
    }

    closeViewer() {
        this.onShowViewer.emit(new ShowViewerArgs(false, null, null, null));
    }

    setCurrentTab(code) {
        this.currentTab = code;
        if (this.currentTab !== 'PROFILE' && this.args.variantId !== null) {
            this.profilesConfigure.hideCrossSections();
        }
        if (this.currentTab === 'ROD_CONFIGURE') {
            setTimeout(() => this.fixView(), 1);
        }
    }

    fixView(){
        this.CORE.refreshAspectRatio();
        this.CORE.zoomAll();
    }
}