import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { OnInit, OnDestroy } from '@angular/core';
import { AlertController, ToastController, Events } from 'ionic-angular';
import { ColorTag, ColorTagUtil, DateIdUtil } from '@canvuus-internal/mvp0-task-core';
import { TaskItem, TaskStatus, TaskBit } from '@canvuus-internal/mvp0-task-data';
import { CommonColorTagComponent } from '@canvuus-internal/mvp0-task-view';
import { TaskEvents } from '../../common/events/task-events';

@Component({
  selector: 'mvp0-task-entry',
  // templateUrl: 'mvp0-task-entry.html',
  template: `
<ion-item>
  <ion-avatar item-left item-start>
    <!-- <common-color-tag #itemColorTag cell-size="12"></common-color-tag> -->
    <a (click)="displayViewTaskPage()"><common-color-tag #itemColorTag cell-size="12" [grayscale]="isGrayscale"></common-color-tag></a>
  </ion-avatar>
  <div>
    <h2>
      <!-- <a (click)="displayViewTaskPage()">{{itemTitle}}</a> -->
      <a (click)="displayViewTaskPage()">{{itemTitle}}</a>
    </h2>
    <p>{{itemDescription}}</p>
  </div>
  <button ion-button item-right icon-only clear color="dark" [hidden]="!showDoItToday" (click)="doItToday()"><ion-icon name="sunny" ></ion-icon></button>
</ion-item>
`
})
export class Mvp0TaskEntryComponent implements OnInit, OnDestroy {

  @ViewChild("itemColorTag") itemColorTag: CommonColorTagComponent;

  // text: string;
  // data: TaskItem;

  @Input("iid") itemId: string;
  @Input("ictag") itemCTag: string;   // ColorTag.toString()
  @Input("ititle") itemTitle: string;
  @Input("itargetdate") itemTargetDate: string;
  @Input("idescription") itemDescription: string;
  @Input("show-doittoday") showDoItToday: boolean;
  @Input("grayscale") isGrayscale: boolean;

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

    // this.text = 'Hello World';
    this.showDoItToday = false;

    // False by default.
    this.isGrayscale = false;

    // // temporary
    // this.data = new TaskItem(null);
    // // this.itemColorTag.colorTag = this.data.colorTag;
    // // ....
    // this does not work
    // console.log(">>>>>> taskItemId = " + this.itemId);

    // // This seems to be needed to avoid the null pointr exception on the UI....
    // this.itemCTag = ColorTagUtil.randomColorTag().toString();
    // // if(this.itemColorTag) {
    // //   let colorTag = ColorTagUtil.randomColorTag();
    // //   this.itemColorTag.colorTag = colorTag;
    // // }

  }
  ngOnInit() {
    // console.log('::: ngOnInit()');

    // variables can be read here....
    // console.log(">>>>>> this.itemId = " + this.itemId);
    // console.log(">>>>>> this.itemCTag = " + this.itemCTag);
    // console.log(">>>>>> this.itemTargetDate = " + this.itemTargetDate);
    // console.log(">>>>>> this.itemTitle = " + this.itemTitle);
    // console.log(">>>>>> this.itemDescription = " + this.itemDescription);
    // console.log(">>>>>> this.showDoItToday = " + this.showDoItToday);

    // TBD: this does not work....
    // -> This logic has been moved to somewhere else.
    // // If targetDate is today, hide the "do it today" button.
    // if(this.showDoItToday) {
    //   let todayId = DateIdUtil.getTodayId();
    //   if(this.itemTargetDate == todayId) {
    //     this.showDoItToday = false;
    //   }
    // }

    // TBD:
    // Do not save it.
    // Just for display.
    if (!this.itemTitle) {
      this.itemTitle = "(Task)";  // ???
    }
    // ....

    // testing....
    // tbd: use @Input ????
    if (this.itemColorTag) {
      let colorTag = ColorTag.fromString(this.itemCTag);
      this.itemColorTag.colorTag = colorTag;
    }
    // ...


  }
  ngOnDestroy() {
    // console.log('::: ngOnDestroy()');
  }


  // // tbd
  // refreshData(_data: TaskItem = null): void {
  //   console.log('>>> refreshData() _data = ' + _data);

  //   if (_data) {
  //     this.data = _data.clone();  // ??
  //   } else {
  //     // This shouldn't happen.
  //     this.data = new TaskItem(null);
  //   }

  //   // if (this.itemColorTag) {
  //   //   this.itemColorTag.colorTag = this.data.colorTag;
  //   // }

  //   console.log('>>> refreshData() this.data = ' + this.data);
  // }



  // testing
  displayViewTaskPage(): void {
    console.log('Mvp0TaskEditorComponent: displayViewTaskPage(). this.itemId = ' + this.itemId);

    this.events.publish(TaskEvents.MVP0_UI_TASK_ENTRY_VIEW, this.itemId);
  }

  doItToday() {
    console.log('Mvp0TaskEditorComponent: doItToday(). this.itemId = ' + this.itemId);

    this.events.publish(TaskEvents.MVP0_UI_TASK_ENTRY_DOIT, this.itemId);
  }

}