import {Component, AfterViewInit, OnDestroy} from '@angular/core';

import {Platform} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import {Router, NavigationEnd} from '@angular/router';
import {AppMinimize} from '@ionic-native/app-minimize/ngx';
import {Mqtt} from './service/mqtt';

declare var screen: any;

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styles: [`
        .circle_process {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            display: none;
        }

        .circle_process .wrapper {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 0;
            overflow: hidden;
        }

        .circle_process .right {
            right: 0;
            position: relative;
            left: 50px;
        }

        .circle_process .left {
            position: relative;
            top: -100px;
        }

        .circle_process .circle {
            width: 80px;
            height: 80px;
            border: 10px solid transparent;
            border-radius: 50%;
            position: absolute;
            top: 0;
            transform: rotate(-135deg);
        }

        .circle_process .rightcircle {
            border-top: 10px solid green;
            border-right: 10px solid green;
            right: 0;
            animation: circle_right 120s linear infinite;
            -webkit-animation: circle_right 120s linear infinite;
        }

        .circle_process .leftcircle {
            border-bottom: 10px solid green;
            border-left: 10px solid green;
            left: 0;
            animation: circle_left 120s linear infinite;
            -webkit-animation: circle_left 120s linear infinite;
        }

        @-webkit-keyframes circle_right {
            0% {
                -webkit-transform: rotate(-135deg);
            }
            50%, 100% {
                -webkit-transform: rotate(45deg);
            }
        }

        @-webkit-keyframes circle_left {
            0%, 50% {
                -webkit-transform: rotate(-135deg);
            }
            100% {
                -webkit-transform: rotate(45deg);
            }
        }

        #innerNum {
            font-size: 20px;
            font-weight: 600;
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 90px;
        }
    `]
})
export class AppComponent implements AfterViewInit, OnDestroy {
    constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private appMinimize: AppMinimize,
        private router: Router,
        private mqtt: Mqtt
    ) {
        this.initializeApp();
    }

    private backBtnPressed;
    private url;
    private flag = 0;

    initializeApp() {
        this.platform.ready().then(() => {
            this.flag++;
            this.registerBackButtonAction(); // 注册返回按键事件
            this.platform.resume.subscribe(); // 弹出框
            this.initRouterListen();
            screen.orientation.lock('portrait');
            if (this.flag === 2) {
                this.statusBar.styleLightContent();
                this.statusBar.backgroundColorByHexString('#000000');
                this.statusBar.show();
                this.statusBar.overlaysWebView(false);
                this.splashScreen.hide();
            }
        });
    }

    ngAfterViewInit(): void {
        this.flag++;
        if (this.flag === 2) {
            this.statusBar.styleLightContent();
            this.statusBar.backgroundColorByHexString('#000000');
            this.statusBar.show();
            this.statusBar.overlaysWebView(false);
            this.splashScreen.hide();
        }
        this.mqtt.getUserInfo();
    }

    ngOnDestroy(): void {
        this.mqtt.endMqtt();
    }

    initRouterListen() {
        this.router.events.subscribe(event => { // 需要放到最后一个执行
            if (event instanceof NavigationEnd) {
                this.url = window.location.pathname;
            }
        });
    }

    registerBackButtonAction() {
        this.platform.backButton.subscribe(() => {
            if (this.url === '/index' || this.url === '/login') {
                if (this.backBtnPressed) {
                    this.appMinimize.minimize();
                    this.backBtnPressed = false;
                    window.history.pushState('forward', null, this.url);
                    return;
                } else {
                    this.backBtnPressed = true;
                    setTimeout(() => this.backBtnPressed = false, 2000);
                    return;
                }
            } else {
                this.backBtnPressed = true;
                setTimeout(() => this.backBtnPressed = false, 2000);
                return;
            }
        });
    }
}
