import {Component, Input} from '@angular/core';
import {ErrorCodes} from './properties/errorCodes';

@Component({
    selector: 'errorMessages',
    template: `
      <div *ngIf="status.some(checkErroCode(errorCodes.LOADING))"
            [class]="(tab_error_class ? '' : 'uk-animation-fade') + ' uk-margin-top  uk-width-1-1'" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
      <div *ngIf="status.every(checkErroCode(errorCodes.NONE))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-primary'" role="alert">No {{type}} available</div>
      <div *ngIf="status.every(checkErroCode(errorCodes.ERROR)) ||
                  (status.some(checkErroCode(errorCodes.ERROR)) && (!status.every(checkErroCode(errorCodes.DONE)) || !status.every(checkErroCode(errorCodes.LOADING))))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">
        An Error Occured
      </div>
      <div *ngIf="status.every(checkErroCode(errorCodes.NOT_AVAILABLE)) ||
                  (status.some(checkErroCode(errorCodes.NOT_AVAILABLE)) && (!status.every(checkErroCode(errorCodes.DONE)) || !status.every(checkErroCode(errorCodes.LOADING))))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">
        Service temprorarily unavailable. Please try again later.
      </div>
      <div *ngIf="status.every(checkErroCode(errorCodes.NOT_FOUND)) ||
                  (status.some(checkErroCode(errorCodes.NOT_FOUND)) && (!status.every(checkErroCode(errorCodes.DONE)) || !status.every(checkErroCode(errorCodes.LOADING))))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">
        No {{type}} found
      </div>
      <div *ngIf="status.every(checkErroCode(errorCodes.OUT_OF_BOUND))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">Requested page out of bounds
      </div>
      <div *ngIf="status.some(checkErroCode(errorCodes.NOT_SAVED))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-warning'" role="alert">Changes could not be saved
      </div>
      <div *ngIf="status.some(checkErroCode(errorCodes.FORBIDDEN))"
            [class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-danger'" role="alert">You are not allowed to access this page
      </div>
    `
  })

  export class ErrorMessagesComponent {
      @Input() status: Array<number>;
      @Input() type: string;
      @Input() tab_error_class: boolean = false;

      public errorCodes:ErrorCodes;

      constructor () {
        this.errorCodes = new ErrorCodes();
      }

      ngOnInit() {
          if(!this.status) {
            this.status = [this.errorCodes.LOADING];
          }
      }

      ngOnDestroy() {}

      public checkErroCode(code: number) {
        return function(status: number) {
          return (status == code);
        }
      }

      public getErrorCode(status: string) {
        if(status == '401') {
          return this.errorCodes.FORBIDDEN;
        } else if(status == "403") {
          return this.errorCodes.FORBIDDEN;
        } else if(status == "204") {
          return this.errorCodes.NONE;
        } else if(status == '404') {
          return this.errorCodes.NOT_FOUND;
        } else if(status == '500') {
          return this.errorCodes.ERROR;
        } else {
          return this.errorCodes.NOT_AVAILABLE;
        }
      }
  }