import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ElementRef,
    Inject,
    Input,
    OnChanges,
} from '@angular/core';

import {
    fadeInOutAnimation,
} from './../../helpers/animations/index';

const UNWIND_TIME = 1300;
const UNWIND_ANIMATION_TYPE = 'easeInOutCubic';

const SPINNER_TIMINGS = {
    NORMAL_FADE_IN: 0,
    NORMAL_FADE_OUT: 200,

    NORMAL_SPINNER_ENTRY_ON_UNWIND: 500,

    PROGRESS_FADE_IN: 50,
    PROGRESS_LEAVE_DELAY: UNWIND_TIME / 2,

    UNWIND_TIME,
};

@Component({
    animations: [
        fadeInOutAnimation({
            animationName: 'progressFadeInOutAnimation',
            animationTimingsEnter:
                SPINNER_TIMINGS.PROGRESS_FADE_IN + 'ms',
            animationTimingsLeave: '1ms ' +
                SPINNER_TIMINGS.PROGRESS_LEAVE_DELAY + 'ms',
        }),
        fadeInOutAnimation({
            animationName: 'normalLoaderFadeOutAnimation',
            animationTimingsEnter:
                SPINNER_TIMINGS.NORMAL_FADE_IN + 'ms',
            animationTimingsLeave:
                SPINNER_TIMINGS.NORMAL_FADE_OUT + 'ms',
        }),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'progress-loading-spinner-component',
    styleUrls: [
        './progress-loading-spinner.component.scss',
    ],
    templateUrl: 'progress-loading-spinner.component.template.pug',

})
export class ProgressLoadingSpinnerComponent
implements OnChanges {
    @Input()
    public spinnerProgress = 0;

    public isUnwinding = false;

    public unwindAnimationTime =
        SPINNER_TIMINGS.UNWIND_TIME;
    public animationType = UNWIND_ANIMATION_TYPE;

    public spinnerRadius = 18;

    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _elementRef: ElementRef,
        @Inject('window')
        private _window: Window,
    ) {}

    public ngOnChanges() {
        if (this.spinnerProgress >= 100) {
            this.unwindSpinner();
        }
        this.initSpinnerRadius();
    }

    public initSpinnerRadius() {
        const parentWidth =
            this._window.getComputedStyle(this._elementRef.nativeElement).width;
        if (parentWidth) {
            this.spinnerRadius = parseInt(parentWidth, 10) / 2;
        }
    }

    public unwindSpinner() {
        this.isUnwinding = true;
        this.spinnerProgress = 0;
        setTimeout(() => {
            this.isUnwinding = false;
            this._changeDetectorRef.markForCheck();
        }, SPINNER_TIMINGS.NORMAL_SPINNER_ENTRY_ON_UNWIND);
    }

    public getAnimationDuration() {
        return this.isUnwinding ? this.unwindAnimationTime : 300;
    }

    public isProgressSpinnerVisible() {
        return this.isUnwinding || this.spinnerProgress > 0;
    }
}