import {
  Component,
  Directive,
  EventEmitter,
  HostBinding,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges
} from '@angular/core';
import { AnalyticsEvent, AnalyticsService, Utils } from '@arrow/bom/core';

/**
 * Style Only Directives
 */

@Directive({ selector: '[bom-part-number], [bomPartNumber]' })
export class BomPartNumberDirective {
  @HostBinding('class.bom-part-number') partNumberClass = true;
}

@Directive({ selector: '[bom-part-user-data], [bomPartUserData]' })
export class BomPartUserDataDirective {
  @HostBinding('class.bom-part-user-data') partUserDataClass = true;
}

/**
 * BomPartComponent
 */

@Component({
  selector: 'bom-part',
  templateUrl: './bom-part.component.html',
  styleUrls: ['./bom-part.component.scss']
})
export class BomPartComponent implements OnInit, OnChanges {
  @Input() row: any;
  @Input() href: string;
  @Input() isAlternateModal?: boolean;
  @Output() partNumberChange: EventEmitter<string> = new EventEmitter();
  @Output() showAlternatives: EventEmitter<any> = new EventEmitter<any>();

  // The original user's uploaded data
  userData: { partNumber: string; manufacturer: string; cpn: string };
  partNumber: string;
  manufacturer: string;
  error: boolean;
  datasheetUrl: string;
  isRoHSComplaint: boolean = false;
  editingMode: boolean;

  RoHS: any = {
    icon: {
      0: '',
      1: 'Refresh-e', //green
      2: 'Leaf', //green
      3: 'Refresh', //grey
      4: 'Leaf', //grey
      5: '',
      6: 'No-Sign' //red
    },
    tooltipMessage: {
      0: '',
      1: 'Unknown',
      2: 'Not Required',
      3: 'Not Compliant',
      4: 'Compliant with Exemption',
      5: 'Compliant',
      6: 'Affected',
      7: 'Unaffected',
      8: 'Unknown',
      9: 'Not Required',
      10: 'No',
      11: 'Yes with Exemption',
      12: 'Yes'
    },
    ariaLabelMessage: {
      0: 'Unknown',
      1: 'Unknown',
      2: 'Not Required',
      3: 'Not Compliant',
      4: 'Compliant with Exemption',
      5: 'Compliant',
      6: 'Affected',
      7: 'Unaffected',
      8: 'Unknown',
      9: 'Not Required',
      10: 'Not Compliant',
      11: 'Compliant with Exemption',
      12: 'Compliant'
    }
  };
  euIconId: number;
  euTooltipMessage: string;
  euRohMessage: string;
  euColor: string;
  chinaIconId: number;
  chinaTooltipMessage: string;
  chinaRohMessage: string;
  chinaColor: string;
  placeholder: string;
  editPartLabel: string;

  constructor(private analyticsService: AnalyticsService, private utils: Utils,) {}

  ngOnInit() {

    this.placeholder = this.utils.translateByKeyWithFallback("rename-part");
    this.editPartLabel = this.utils.translateByKeyWithFallback("edit-part-label");

    if (this.row.part && this.row.part.roHsInfo) {
      this.euIconId = this.RoHS.icon[this.row.part.roHsInfo.eu.iconId];
      this.euTooltipMessage = this.RoHS.tooltipMessage[this.row.part.roHsInfo.eu.messageType];
      this.euRohMessage = `RoHS compliance status for Europe is ${this.RoHS.ariaLabelMessage[this.row.part.roHsInfo.eu.messageType]}`;
      this.euColor =
        this.row.part.roHsInfo.eu.iconId === 1
          ? 'green-icon'
          : this.row.part.roHsInfo.eu.iconId === 2
          ? 'green-icon'
          : this.row.part.roHsInfo.eu.iconId === 3
          ? 'grey-icon'
          : this.row.part.roHsInfo.eu.iconId === 4
          ? 'grey-icon'
          : 'red-icon';
      this.chinaIconId = this.RoHS.icon[this.row.part.roHsInfo.china.iconId];
      this.chinaTooltipMessage = this.RoHS.tooltipMessage[this.row.part.roHsInfo.china.messageType];
      this.chinaRohMessage = `RoHS compliance status for China is ${this.RoHS.ariaLabelMessage[this.row.part.roHsInfo.china.messageType]}`;
      this.chinaColor =
        this.row.part.roHsInfo.china.iconId === 1
          ? 'green-icon'
          : this.row.part.roHsInfo.china.iconId === 2
          ? 'green-icon'
          : this.row.part.roHsInfo.china.iconId === 3
          ? 'grey-icon'
          : this.row.part.roHsInfo.china.iconId === 4
          ? 'grey-icon'
          : 'red-icon';
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.row) {
      this.partNumber =
        this.row.part && (this.row.part.number || this.row.item.originalName);
      // this.manufacturer = (this.row.part && this.row.part.manufacturer) && this.row.part.manufacturer.name;
      this.manufacturer = this.row.item.manufacturer;
      // this.productUrl = this.row.part.
      this.datasheetUrl =
        (this.row.part && this.row.part.datasheetUrl) ||
        this.row.item.datasheet;
      this.isRoHSComplaint =
        (this.row.part && this.row.part.roHsInfo) || this.row.item.roHsInfo;
      this.userData = this.row.userUploadData;
      this.error = !this.row.item.matchStatus && this.row.loaded;
    }
  }

  onPartChange(newPartName: string) {
    this.partNumberChange.emit(newPartName);
  }

  onShowAlternatives(row): void {
    this.showAlternatives.emit(row);
  }
  trackPdp(row: any) {
    this.analyticsService.googleTrack(AnalyticsEvent.PRODUCT_LIST_CLICK, row);
  }

  editMode(isEditMode: boolean) {
    this.editingMode = isEditMode;
  }

}