import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
import { Lab } from '../../lib/filler/color/color';
import { ColorSumItem } from '../../lib/filler/common/interfaces';



@Component({
  selector: 'art-color-box',
  template: `
    <span #box  class="color-box " [ngClass]="{'active': data.color == colorInt, 'similar' : isSimilar}"
      [ngStyle]="{'background-color' : data.cssColor}" 
      (click)="onClick()" 
      (dblclick)="onDblClick()"
      (mousedown)="onmousedown()"
      (mouseout)="onmouseout()"
      (mouseup)="onmouseup()"
      >
      {{text || data.total}}
      <i *ngIf="showTrash" class=" color-box-delete fal fa-trash-alt" (click)="onTrash($event)"></i>
      <i *ngIf="showOrder && orderDirection == 0" class=" color-box-order fal fa-arrow-down" (click)="onOrder($event)"></i>
      <i *ngIf="showOrder && orderDirection == 1" class=" color-box-order fal fa-arrow-up" (click)="onOrder($event)"></i>
    </span>
  `,
  styles: [
    `
  




  .color-box{
  box-sizing: border-box;
  display: inline-block;
  font-size: 10px;
  width: 35px; 
  height: 35px;
  line-height: 31px;
  text-align: center;
  position: relative;
  border-radius: 50%;
  background-color: pink;  
  margin: 5px;
  margin-bottom: 8px;
  box-shadow: 1px 1px 5px #555;
  cursor: pointer;
  color: #fff;
  text-shadow: 1px 1px #333;
  border:2px solid white;
  user-select: none;
}



.color-box.active{
  border:2px solid black;
  transform: scale(1.3);
}

.color-box.similar{
  border:2px solid blue;
}

.color-box-delete {
  top:-8px;
  right:-8px;
  font-size: 8px !important;
  position: absolute;
  text-align: center;
  line-height: 16px;
  width:16px;
  height:16px;
  border-radius: 50%;
  background: #999;
  color:white;
  text-shadow: none;
}

.color-box-delete:hover {
  background: #ff0000;
}

.color-box-order {
  bottom:-8px;
  left:-8px;
  /* top:-8px;
  right:-8px; */
  font-size: 8px !important;
  position: absolute;
  text-align: center;
  line-height: 16px;
  width:16px;
  height:16px;
  border-radius: 50%;
  background: #999;
  color:white;
  text-shadow: none;
}

.color-box-order:hover {
  background: #ff0000;
}

  `]
})
export class ColorBoxComponent implements OnInit {
  @Input('data') data: ColorSumItem;
  @Input('text') text: string;
  @Input('showTrash') showTrash: boolean = true;
  @Input('showOrder') showOrder: boolean = true;
  @Input('orderDirection') orderDirection: number = 0;  // 0-down, 1-up

  private _minDist: number = 4;
  public get minDist(): number {
    return this._minDist;
  }
  @Input() public set minDist(value: number) {
    this._minDist = value;
  }

  @ViewChild('box') boxRef: ElementRef;

  private _colorInt: number; //selected color int.
  private _colorLab: Lab;
  distance: number;
  @Input() set colorInt(ci: number) {
    this._colorInt = ci;
    this._colorLab = Lab.fromRGBA(ci);
    this.distance = this.data && this.data.lab && this.data.lab.deltaE(this._colorLab);
    //console.log('distance:', this.distance, this._colorLab.toString());
  }
  get colorInt(): number {
    return this._colorInt;
  }

  get isSimilar(): boolean { return this.distance < this.minDist && this.distance != 0 }


  @Output('onClick') _onClick = new EventEmitter<ColorSumItem>();
  @Output('onTrash') _onTrash = new EventEmitter<ColorSumItem>();
  @Output('onOrder') _onOrder = new EventEmitter<ColorSumItem>();
  @Output('onDblClick') _onDblClick = new EventEmitter<ColorSumItem>();
  @Output('onLongPress') _onLongPress = new EventEmitter<ColorSumItem>();


  constructor() { }

  ngOnInit() {

  }

  onClick() {
    this._onClick.emit(this.data);
  }

  onTrash(event: Event) {
    event.stopPropagation();
    this._onTrash.emit(this.data);
  }

  onOrder(event: Event) {
    event.stopPropagation();
    this._onOrder.emit(this.data);
  }

  onDblClick() {
    this._onDblClick.emit(this.data);
  }

  onLongPress() {
    this._onLongPress.emit(this.data)
  }

  timeout: any;
  onmousedown() {
    this.timeout = setTimeout(() => {
      this.onLongPress();
      this.timeout = null;
    }, 500);
  }

  onmouseout() { if (this.timeout) clearTimeout(this.timeout); }
  onmouseup() { if (this.timeout) clearTimeout(this.timeout); }

}
