import {
    Component,
    Input,
    Output,
    EventEmitter,
    OnInit
} from '@angular/core';
import {
    ScanningResultService,
    ScanningResultSummary
} from '../service/index';
import { ErrorHandler } from '../error-handler/index';
import { toPromise } from '../utils';
import { MAX_TIP_WIDTH } from './result-tip.component';
import { SCANNING_STYLES } from './scanning.css';
import { BAR_CHART_COMPONENT_HTML } from './scanning.html';

export enum ScanState {
    COMPLETED, //Scanning work successfully completed
    ERROR,  //Error occurred when scanning
    QUEUED, //Scanning job is queued
    SCANNING, //Scanning in progress
    PENDING, //Scanning not start
    UNKNOWN //Unknown status
}

@Component({
    selector: 'hbr-scan-result-bar',
    styles: [SCANNING_STYLES],
    template: BAR_CHART_COMPONENT_HTML
})
export class ResultBarChartComponent implements OnInit {
    @Input() tagId: string = "";
    @Input() state: ScanState = ScanState.UNKNOWN;
    @Input() summary: ScanningResultSummary = {
        totalComponents: 0,
        noneComponents: 0,
        completeTimestamp: new Date(),
        high: [],
        medium: [],
        low: [],
        unknown: []
    };
    @Output() startScanning: EventEmitter<string> = new EventEmitter<string>();

    constructor(
        private scanningService: ScanningResultService,
        private errorHandler: ErrorHandler) { }

    ngOnInit(): void {
        toPromise<ScanningResultSummary>(this.scanningService.getScanningResultSummary(this.tagId))
            .then((summary: ScanningResultSummary) => {
                this.summary = summary;
            })
            .catch(error => {
                this.errorHandler.error(error);
            })
    }

    public get completed(): boolean {
        return this.state === ScanState.COMPLETED;
    }

    public get error(): boolean {
        return this.state === ScanState.ERROR;
    }

    public get queued(): boolean {
        return this.state === ScanState.QUEUED;
    }

    public get scanning(): boolean {
        return this.state === ScanState.SCANNING;
    }

    public get pending(): boolean {
        return this.state === ScanState.PENDING;
    }

    public get unknown(): boolean {
        return this.state === ScanState.UNKNOWN;
    }

    scanNow(): void {
        if (this.tagId && this.tagId !== '') {
            this.startScanning.emit(this.tagId);
        }
    }

    public get hasHigh(): boolean {
        return this.summary && this.summary.high && this.summary.high.length > 0;
    }

    public get hasMedium(): boolean {
        return this.summary && this.summary.medium && this.summary.medium.length > 0;
    }

    public get hasLow(): boolean {
        return this.summary && this.summary.low && this.summary.low.length > 0;
    }

    public get hasUnknown(): boolean {
        return this.summary && this.summary.unknown && this.summary.unknown.length > 0;
    }

    public get hasNone(): boolean {
        return this.summary && this.summary.noneComponents > 0;
    }

    /**
     * Calculate the percent width of each severity.
     * 
     * @param {string} flag
     *  'h': high
     *  'm': medium
     *  'l': low
     *  'u': unknown
     *  'n': none
     * @returns {number}
     * 
     * @memberOf ResultBarChartComponent
     */
    percent(flag: string): number {
        if (!this.summary || this.summary.totalComponents === 0) {
            return 0;
        }

        let numerator: number = 0;
        switch (flag) {
            case 'h':
                numerator = this.summary.high.length;
                break;
            case 'm':
                numerator = this.summary.medium.length;
                break;
            case 'l':
                numerator = this.summary.low.length;
                break;
            case 'u':
                numerator = this.summary.unknown.length;
                break;
            default:
                numerator = this.summary.noneComponents;
                break;
        }

        return Math.round((numerator / this.summary.totalComponents) * MAX_TIP_WIDTH);
    }


}
