import {
  Component,
  Input,
  OnChanges,
  ChangeDetectorRef,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef
} from '@angular/core';

import {
  MessageBusService,
  DialogService,
  SocketsService,
  PermissionsService,
  BomModel,
  BomService,
  AnalyticsService,
  AnalyticsEvent,
  ApiSocketEmitAction
} from '@arrow/bom/core';
import { LoggerService } from '@arrow/bom/logger';

@Component({
  selector: 'bom-multiplier',
  templateUrl: 'multiplier.component.html',
  styleUrls: ['multiplier.component.scss']
})
export class MultiplierComponent implements OnChanges {
  @ViewChild('multiplierEl') multInput: ElementRef;

  @Input() bom: BomModel;
  @Input() bomLoading: boolean;
  @Input() showEditName: boolean;

  @Output() onblur: EventEmitter<any> = new EventEmitter();

  permissions: any;
  originalMultiplier: number;
  readonly maxLength = 4;

  constructor(
    private _bomService: BomService,
    private _messageBus: MessageBusService,
    private _dialog: DialogService,
    private _sockets: SocketsService,
    private _cdRef: ChangeDetectorRef,
    private _ps: PermissionsService,
    private _log: LoggerService,
    private _analyticsService: AnalyticsService
  ) {}

  ngOnChanges(): void {
    if (!this.bomLoading) this.originalMultiplier = this.bom.multiplier;
    this._ps
      .getPermissions()
      .subscribe((permissions: any) => (this.permissions = permissions));
  }

  /**
   * Updates the BOM multiplier.
   * @param bom
   * @param originalMultiplier
   */
  private _updateMultiplier(bom: BomModel, originalMultiplier: number): void {
    // If the multiplier hasn't changed don't do anything
    if (bom.multiplier === originalMultiplier) return;

    // Mark all rows as loading
    bom.rows.forEach(r => {
      r.setItemModelLoading(true);
      r.setPriceItemModelLoading(true);
    });

    this._messageBus.to('ch:loader', { payload: true });
    this._analyticsService.googleTrackEvent(AnalyticsEvent.CLICK, {
      category: 'BOM',
      action: 'Multiplier',
      label: bom.multiplier
    });

    this._sockets.emitAction( ApiSocketEmitAction.ALTER_METADATA, {
      bomId: bom.id,
      multiplier: bom.multiplier
    });
  }

  /**
   *  Calls update multiplier if multiplier valud is valid
   *  @param valid
   *  @param bom
   *  @param multInput
   *  @param originalMultiplier
   */
  updateBomMultiplier(
    valid: boolean,
    bom: BomModel,
    multInput: ElementRef,
    originalMultiplier: number
  ): void {
    this.onblur.emit({});

    // TODO there is no 0 validation
    if (
      !valid ||
      bom.multiplier > multInput.nativeElement.max ||
      bom.multiplier < multInput.nativeElement.min
    ) {
      bom.multiplier = originalMultiplier;
      return;
    }
    this._updateMultiplier(bom, originalMultiplier);
  }

  checkLength(multInput: ElementRef, maxLength: number) {
    if (multInput.nativeElement.value.length <= maxLength) {
      return;
    } else {
      let str = multInput.nativeElement.value;
      str = str.substring(0, maxLength);
      multInput.nativeElement.value = str;
    }
  }

  /**
   * handle enter button
   * @param multInput
   */
  handleEnter(multInput: ElementRef): void {
    // First we trigger the 'blur' on the input element to run the (blur) handler
    multInput.nativeElement.blur();

    // Then we emit the 'onblur' EventEmitter, so that the
    //parent component knows to handle visually 'blurring' the BOM edit fields
    this.onblur.emit({});
  }
}