import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AlertController, ToastController, Events } from 'ionic-angular';
import { ColorTag, ColorTagUtil } from '@canvuus-internal/mvp0-task-core';

@Component({
  selector: 'mini-color-dot',
  template: `
<svg xmlns="http://www.w3.org/2000/svg" [style.width]="2*cellSize" [style.height]="2*cellSize" width="24" height="24">
  <rect [style.x]="0" [style.y]="0" x="0" y="0" [style.width]="cellSize" [style.height]="cellSize" width="12" height="12" [style.fill]="color0" />
  <rect [style.x]="cellSize" [style.y]="0" x="12" y="0" [style.width]="cellSize" [style.height]="cellSize" width="12" height="12" [style.fill]="color1" />
  <rect [style.x]="0" [style.y]="cellSize" x="0" y="12" [style.width]="cellSize" [style.height]="cellSize" width="12" height="12" [style.fill]="color3" />
  <rect [style.x]="cellSize" [style.y]="cellSize" x="12" y="12" [style.width]="cellSize" [style.height]="cellSize" width="12" height="12" [style.fill]="color4" />
</svg>
`
})
// <svg xmlns="http://www.w3.org/2000/svg" [style.width]="2*cellSize" [style.height]="2*cellSize" width="16" height="16">
//   <rect [style.x]="0" [style.y]="0" x="0" y="0" [style.width]="cellSize" [style.height]="cellSize" width="8" height="8" [style.fill]="color0" />
//   <rect [style.x]="cellSize" [style.y]="0" x="8" y="0" [style.width]="cellSize" [style.height]="cellSize" width="8" height="8" [style.fill]="color1" />
//   <rect [style.x]="0" [style.y]="cellSize" x="0" y="8" [style.width]="cellSize" [style.height]="cellSize" width="8" height="8" [style.fill]="color3" />
//   <rect [style.x]="cellSize" [style.y]="cellSize" x="8" y="8" [style.width]="cellSize" [style.height]="cellSize" width="8" height="8" [style.fill]="color4" />
// </svg>
export class MiniColorDotComponent implements OnInit {

  colorTag: ColorTag;

  @Input("cell-size") cellSize: number;
  // gridSize: number;
  @Input("color-tag") itemCTag: string;

  // If set to true (typically, but not always, because the associated task is disabled or done, etc.)
  //   we display the "grayscale" image rather than the original color version.
  @Input("grayscale") isGrayscale: boolean;
  

  // To avoid error when colorTag is not properly set.
  get color0(): string {
    if(this.isGrayscale) {
      return (this.colorTag && this.colorTag.grayscaleColors && this.colorTag.grayscaleColors.length > 0) ? this.colorTag.grayscaleColors[0].toString() : "#ffffff";
    } else {
      return (this.colorTag && this.colorTag.colors && this.colorTag.colors.length > 0) ? this.colorTag.colors[0].toString() : "#ffffff";
    }
  }
  get color1(): string {
    if(this.isGrayscale) {
      return (this.colorTag && this.colorTag.grayscaleColors && this.colorTag.grayscaleColors.length > 1) ? this.colorTag.grayscaleColors[1].toString() : "#ffffff";
    } else {
      return (this.colorTag && this.colorTag.colors && this.colorTag.colors.length > 1) ? this.colorTag.colors[1].toString() : "#ffffff";
    }
  }
  get color3(): string {
    if(this.isGrayscale) {
      return (this.colorTag && this.colorTag.grayscaleColors && this.colorTag.grayscaleColors.length > 3) ? this.colorTag.grayscaleColors[3].toString() : "#ffffff";
    } else {
      return (this.colorTag && this.colorTag.colors && this.colorTag.colors.length > 3) ? this.colorTag.colors[3].toString() : "#ffffff";
    }
  }
  get color4(): string {
    if(this.isGrayscale) {
      return (this.colorTag && this.colorTag.grayscaleColors && this.colorTag.grayscaleColors.length > 4) ? this.colorTag.grayscaleColors[4].toString() : "#ffffff";
    } else {
      return (this.colorTag && this.colorTag.colors && this.colorTag.colors.length > 4) ? this.colorTag.colors[4].toString() : "#ffffff";
    }
  }


  constructor(private alertCtrl: AlertController,
    private toastCtrl: ToastController,
    private events: Events) {
    // console.log('Hello MiniColorDot Component');

    // testing...
    // this.colorTag = ColorTagUtil.randomColorTag();
    this.colorTag = ColorTag.BW_CHECKER_BOARD_A;
    // this.cellSize = 8;
    this.cellSize = 12;
    // this.gridSize = 2 * this.cellSize;

    this.isGrayscale = false;
  }

  ngOnInit() {
    // variables can be read here....
    // console.log(">>>>>> this.cellSize = " + this.cellSize);
    // console.log(">>>>>> this.gridSize = " + this.gridSize);

    if(this.itemCTag) {
      let colorTag = ColorTag.fromString(this.itemCTag);
      this.colorTag = colorTag;
    }
  }


}