/*
* @Author: 疯狂秀才(Lucas Huang)
* @LastEditors: 疯狂秀才(Lucas Huang)
* @Company: Inspur
* @Version: v0.1.8
* @Date: 2018-09-18 16:04:05
* @LastEditTime: 2019-10-17 13:42:45
*/

import { Component, OnInit, ElementRef, ViewChild, Renderer2, AfterViewInit, Output, EventEmitter, OnDestroy, Input } from '@angular/core';
import { LOADING_STYLES } from './loading.styles';
import { delay, filter, takeUntil } from 'rxjs/operators';
import { Subject, Subscription, BehaviorSubject } from 'rxjs';

@Component({
    selector: 'farris-loading',
    template: `
        <div #loadingBackdrop class="farris-loading-backdrop loading-wait" style="display: none"></div>
        <div #loadingContainerEl class="farris-loading" style="display: none">
            <div class="ng-busy-default-wrapper">
                <div class="ng-busy-default-sign" >
                    <div [style.width]="width+ 'px'" [style.height]="width+'px'" style="display: inline-block;margin:4px;"
                                [innerHTML]="loadingStyleDom[type] | safe: 'html'"></div>
                    <div class="ng-busy-default-text" style="margin-left:0;"
                                 *ngIf="showMessage" [innerHTML]="'loading.message' | locale: '' :message | safe: 'html'"></div>
                </div>
            </div>
        </div>
    `,
    styles: [
        `.loading-wait {
            cursor: wait
        }
        .animated-0.5 {
            -webkit-animation-duration: 0s;
            animation-duration: 0s;
        }
        `
    ]
})
export class LoadingComponent implements OnInit, AfterViewInit, OnDestroy {
    @Input() showMessage = true;
    loadingStyleDom = LOADING_STYLES;
    id: number;
    private _isActive = false;
    private activeSubject = new BehaviorSubject(false);
    message = '';
    width = 30;
    /** loading 样式 */
    type = 0;

    delay = 300;

    get isActive(): boolean {
        return this._isActive;
    }

    set isActive(val: boolean) {
        this._isActive = val;
        if (this.activeSubject) {
            this.activeSubject.next(val);
        }
    }

    @ViewChild('loadingContainerEl') loadingContainerEl: ElementRef;
    @ViewChild('loadingBackdrop') loadingBackdrop: ElementRef;
    @Output() closed = new EventEmitter<any>();
    activedSubscrition: Subscription = null;

    private destroy$ = new Subject();

    constructor(private render: Renderer2, private el: ElementRef) {
    }

    ngOnInit() {
        this.activedSubscrition = this.activeSubject.pipe(
            takeUntil(this.destroy$)
        ).pipe(
            filter((n: boolean) => {
                return n;
            }),
            delay(this.delay)
        ).subscribe(v => {
            if (v && this.isActive) {
                // this.animate('f-component-loading fadeIn animated');
                this.render.setStyle(this.loadingContainerEl.nativeElement, 'display', 'block');
                this.render.setStyle(this.loadingBackdrop.nativeElement, 'display', 'block');
                this.setPosition();
            }
        });
    }

    ngAfterViewInit() {

    }

    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
        // this.activeSubject.complete();
        // this.activeSubject = null;
        // this.activedSubscrition.unsubscribe();
    }

    close() {
        // if (this.loadingBackdrop.nativeElement.parentElement) {
        //     this.render.removeChild(this.el.nativeElement, this.loadingBackdrop.nativeElement);
        // }
        // const waitEle = document.body.querySelector('.farris-loading-backdrop');
        if (this.loadingBackdrop) {
            this.loadingBackdrop.nativeElement.remove();
        }
        this.isActive = false;
        this.render.removeAttribute(this.el.nativeElement, 'class');
        // this.animate('f-component-loading fadeOut animated animated-0.5');
        this.closed.emit(this.isActive);
    }

    private setPosition() {
        const containerWidth = this.loadingContainerEl.nativeElement.clientWidth;
        const containerHeight = this.loadingContainerEl.nativeElement.clientHeight;

        this.render.setStyle(this.loadingContainerEl.nativeElement, 'marginTop', -containerHeight / 2 + 'px');
        this.render.setStyle(this.loadingContainerEl.nativeElement, 'marginLeft', -containerWidth / 2 + 'px');
    }

    private animate(animateCls: string) {
        this.addAnimationEndEvent('webkitAnimationEnd', 'mozAnimationEnd', 'MSAnimationEnd', 'oanimationend', 'animationend');
        this.render.setAttribute(this.el.nativeElement, 'class', animateCls);
    }

    private addAnimationEndEvent(...events: string[]) {
        const _this = this;

        events.forEach(e => {
            _this.el.nativeElement.addEventListener(e, function handler() {
                _this.el.nativeElement.removeEventListener(e, handler);
                // _this.render.removeAttribute(_this.el.nativeElement, 'class');
                ['fadeIn', 'fadeOut', 'animated', 'animated-0.5'].forEach(n => {
                    _this.render.removeClass(_this.el.nativeElement, n);
                });
                _this.closed.emit(_this.isActive);
            });
        });
    }
}