// Angular //
import { Component, Input, Inject, OnInit } from '@angular/core';

// Services //
import { TranslateService } from '@ngx-translate/core';

// Pipes //
import { NiceCurrencyPipe } from '@fb/common';

@Component({
    selector: 'fb-kpi-widget',
    templateUrl: './kpi-widget.component.html',
    styleUrls: []
})
export class KpiWidgetComponent implements OnInit {
    @Input()
    data: any;

    @Input()
    isCurrency: boolean;

    goalStr: string;
    doneStr: string;
    startMonth: string;
    endMonth: string;
    graphData: fb.IFbGraphData[];
    graphOptions: any;

    private endMonthInt: number;
    private done: any;
    private goal: any;

    constructor(
        private readonly translate: TranslateService,
        private readonly niceCurrencyPipe: NiceCurrencyPipe,
        @Inject('CommonService') private readonly commonService: fb.ICommonService,
        @Inject('SaeljdrivService') private readonly saeljdrivService: fb.ISaeljdrivService
    ) { }

    ngOnInit(): void {
        this.goalStr = this.translate.instant('SAELJ.MAAL');
        this.doneStr = this.translate.instant('SAELJ.GENOMFOERDA'); // attrs.doneStr ? this.translate.instant(attrs.doneStr) :
        this.startMonth = this.translate.instant('DATE_LONG.JANUARI');

        this.endMonthInt = moment().get('month');
        this.endMonth = this.translate.instant(`DATE_LONG_MOMENTMAP.${this.endMonthInt}`);

        this.updateGraph();
    }

    private updateGraph(): void {
        const dataObj: IKpiGraphData = this.saeljdrivService.getKPIGraphData(this.data, this.endMonthInt);
        this.graphData = [dataObj.graphData];

        this.graphOptions = {
            graphType: fb.FasITDomain.GraphType.Gauge,
            total: dataObj.maalMonthAvg || 1,
            label: this.getGraphLabel(dataObj),
            subLabel: this.getGraphSubLabel(dataObj),
            width: 140,
            height: 140,
            thickness: 10

        };
        this.goal = dataObj.maalAcc;
        this.done = dataObj.utfallAcc;
    }

    private getGraphLabel (dataObj: any): any {
        const value: number = Math.abs(dataObj.accDiff);
        const label: string = this.niceCurrencyPipe.transform(value, false, false, '');
        return { value: dataObj.accDiff > 0 ? `+ ${label}` : `${label}`, color: '#000' };
    }

    private getGraphSubLabel (dataObj: any): any {
        const positiveAccDiff: boolean = dataObj.accDiff > 0;
        let value: string = undefined;

        if (!this.isCurrency && positiveAccDiff) {
            return undefined;
        } else if (this.isCurrency && positiveAccDiff) {
            value = (this.commonService.getKontorsValutaSuffix() || '').toUpperCase();
        } else if (!this.isCurrency && !positiveAccDiff) {
            value = 'KVAR';
        } else if (this.isCurrency && !positiveAccDiff) {
            value = (this.commonService.getKontorsValutaSuffix() || '').toUpperCase() + ' KVAR';
        }

        return { color: '#000', value: value };
    }

    getGoalAmount (): string {
        return this.niceCurrencyPipe.transform(this.goal, false, false, this.isCurrency ? undefined : '');
    }

    getAmountOfDone(): string {
        return this.niceCurrencyPipe.transform(this.done, false, false, this.isCurrency ? undefined : '');
    }

    getStarClass (month, index): string {
        let cssClass: string = '';
        if (index > this.endMonthInt) {
            cssClass += ' fi-star-o';
        } else {
            cssClass += ` ${month.Utfall > month.Maal ? 'fi-diamond' : 'fi-star'}`;
            cssClass += ` ${month.Utfall >= month.Maal ? 'succeeded' : 'failed'}`;
        }
        return cssClass;
    }

    getTextClass (): string {
        return (this.done >= this.goal ? 'color-success' : 'color-failed');
    }

    getTooltipText (month: fb.KPItupel): string {
        if (month.Utfall === null && month.Maal === null) {
            return null;
        }

        return this.niceCurrencyPipe.transform(month.Utfall, true, false, '') + ' ' +
            (month.Maal !== null ? `(${this.niceCurrencyPipe.transform(month.Maal, true, false, '')})` : '');
    }
}


export interface IKpiGraphData {
    graphData: fb.IFbGraphData;
    maalMonthAvg: number;
    accDiff: number;
    maalAcc: number;
    utfallAcc: number;
}