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-card',
  // templateUrl: 'mvp0-task-card.html',
  template: `
<ion-card>
  <ion-card-header>
    <ion-badge color="{{colorPriorityBadge}}" item-left>{{itemPriority}}</ion-badge>
    <span style="font-size:1.05em; margin-left:4px;">
      <a (click)="openThisItem()">{{itemTitle}}</a>
    </span>
  </ion-card-header>
  <ion-card-content>
    <ion-list no-lines>
      <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"></common-color-tag></a> -->
          <!-- <a (click)="openThisItem()"><common-color-tag #itemColorTag cell-size="12"></common-color-tag></a> -->
          <a (click)="openTaskDetail()"><common-color-tag #itemColorTag cell-size="12" [grayscale]="isGrayscale"></common-color-tag></a>
        </ion-avatar>
        <div>
          <h3>
            <!-- <a (click)="displayViewTaskPage()">{{itemTitle}}</a> -->
            <!-- <a (click)="openThisItem()">{{itemTitle}}</a> -->
            <a (click)="doItToday()">{{targetDateString}}</a>
<!--
            {{targetDateString}}
            <button ion-button icon-only clear small color="dark" [hidden]="!showDoItButton" (click)="doItToday()"><ion-icon name="sunny" ></ion-icon></button>
-->
          </h3>
          <p>
          <!-- <em>{{targetDateString}}</em> -->
          {{itemDescription}}
          </p>
        </div>
<!-- -->
        <button ion-button item-right icon-only clear *ngIf="isOpenButtonLarge" large color="{{colorOpenButton}}" [hidden]="!showOpenTaskButton" (click)="openThisItem()"><ion-icon name="book" ></ion-icon></button>
        <button ion-button item-right icon-only clear *ngIf="!isOpenButtonLarge" color="{{colorOpenButton}}" [hidden]="!showOpenTaskButton" (click)="openThisItem()"><ion-icon name="book" ></ion-icon></button>
<!-- -->
<!-- TBD: Why does this not work???
        <button ion-button item-right icon-only clear [attr.large]="isOpenButtonLarge ? true : null" color="{{colorOpenButton}}" [hidden]="!showOpenTaskButton" (click)="openThisItem()"><ion-icon name="book" ></ion-icon></button>
        <button ion-button item-right icon-only clear [attr.large]="isOpenButtonLarge" color="{{colorOpenButton}}" [hidden]="!showOpenTaskButton" (click)="openThisItem()"><ion-icon name="book" ></ion-icon></button>
-->
      </ion-item>
      <!--<ion-item>
        <ion-buttons end>
          <button ion-button icon-only clear small color="dark" [hidden]="!showMarkAsDoneButton" (click)="markAsDone()"><ion-icon name="checkbox-outline" ></ion-icon></button>
          <button ion-button icon-only clear small color="dark" [hidden]="!showDeferTaskButton" (click)="deferTillTomorrow()"><ion-icon name="moon" ></ion-icon></button>
          <button ion-button icon-only clear small color="dark" [hidden]="!showMoveToBacklogButton" (click)="moveToBacklog()"><ion-icon name="archive" ></ion-icon></button>
          <button ion-button icon-only clear small color="dark" [hidden]="!showDeleteTaskButton" (click)="deleteThisItem()"><ion-icon name="trash" ></ion-icon></button>
          <button ion-button icon-only clear small color="dark" [hidden]="!showEditTaskButton" (click)="editThisItem()"><ion-icon name="create" ></ion-icon></button>
        </ion-buttons>
      </ion-item>-->
    </ion-list>
  </ion-card-content>

<!-- -->
  <ion-fab bottom right>
    <button ion-fab mini clear color="light"><ion-icon name="arrow-dropleft" color="dark"></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab mini clear [hidden]="!showEditTaskButton" (click)="editThisItem()"><ion-icon name="create" color="dark"></ion-icon></button>
      <button ion-fab mini clear [hidden]="!showDeleteTaskButton" (click)="deleteThisItem()"><ion-icon name="trash" color="dark"></ion-icon></button>
      <button ion-fab mini clear [hidden]="!showMoveToBacklogButton" (click)="moveToBacklog()"><ion-icon name="archive" color="dark"></ion-icon></button>
      <button ion-fab mini clear [hidden]="!showDeferTaskButton" (click)="deferTillTomorrow()"><ion-icon name="moon" color="dark"></ion-icon></button>
      <button ion-fab mini clear [hidden]="!showMarkAsDoneButton" (click)="markAsDone()"><ion-icon name="checkbox-outline" color="dark"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>
<!-- -->

</ion-card>
`
})
export class Mvp0TaskCardComponent implements OnInit, OnDestroy {

  @ViewChild("itemColorTag") itemColorTag: CommonColorTagComponent;

  @Input("iid") itemId: string;
  @Input("ictag") itemCTag: string;   // ColorTag.toString()
  @Input("ititle") itemTitle: string;
  @Input("ipriority") itemPriority: number;
  @Input("itargetdate") itemTargetDate: string;  // date id.
  @Input("iduedate") itemDueDate: string;  // date id.
  @Input("idescription") itemDescription: string;
  @Input("color-prioritybadge") colorPriorityBadge: string;
  @Input("color-openbutton") colorOpenButton: string;
  @Input("size-openbutton") sizeOpenButton: string;
  @Input("show-openbutton") showOpenTaskButton: boolean;
  @Input("show-doitbutton") showDoItButton: boolean;
  @Input("show-donebutton") showMarkAsDoneButton: boolean;
  @Input("show-deferbutton") showDeferTaskButton: boolean;
  @Input("show-backlogbutton") showMoveToBacklogButton: boolean;
  @Input("show-deletebutton") showDeleteTaskButton: boolean;
  @Input("show-editbutton") showEditTaskButton: boolean;
  @Input("grayscale") isGrayscale: boolean;

  // For display.
  targetDateString: string;
  dueDateString: string;     // Currently, not being used.
  isOpenButtonLarge: boolean;
  // isOpenButtonLarge: any;

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

    // Default values.
    this.targetDateString = '';
    this.dueDateString = '';
    this.colorPriorityBadge = 'primary';
    this.colorOpenButton = 'primary';
    this.isOpenButtonLarge = false;
    // this.isOpenButtonLarge = null;
    this.showOpenTaskButton = true;
    this.showDoItButton = false;
    this.showMarkAsDoneButton = true;
    this.showDeferTaskButton = true;
    this.showMoveToBacklogButton = true;
    this.showDeleteTaskButton = true;
    this.showEditTaskButton = 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.showOpenTaskButton = " + this.showOpenTaskButton);

    // 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.showOpenTaskButton) {
    //   let todayId = DateIdUtil.getTodayId();
    //   if(this.itemTargetDate == todayId) {
    //     this.showOpenTaskButton = false;
    //   }
    // }

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

    // TBD:
    if(this.itemTargetDate) {
      this.targetDateString = DateIdUtil.getLocaleDateString(this.itemTargetDate);
    } else {
      this.targetDateString = '';
    }
    if(this.itemDueDate) {
      this.dueDateString = DateIdUtil.getLocaleDateString(this.itemDueDate);
    } else {
      this.dueDateString = '';
    }

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

    // temporary
    // For now, we only check "large"...
    if(this.sizeOpenButton) {
      if(this.sizeOpenButton == "large") {
        this.isOpenButtonLarge = true;
      } else {
        this.isOpenButtonLarge = false;
        // this.isOpenButtonLarge = null;
      }
    }
  }
  ngOnDestroy() {
    // console.log('::: ngOnDestroy()');
  }


  // // Not being used.
  // displayViewTaskPage() {
  //   console.log('displayViewTaskPage(). this.itemId = ' + this.itemId);
  //   this.events.publish(TaskEvents.MVP0_UI_TASK_ENTRY_VIEW, this.itemId);
  // }
  // doItToday() {
  //   console.log('doItToday(). this.itemId = ' + this.itemId);
  //   this.events.publish(TaskEvents.MVP0_UI_TASK_ENTRY_DOIT, this.itemId);
  // }
  // // Not being used.


  openThisItem() {
    // console.log('openThisItem(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_OPEN_TASK, this.itemId);
  }

  openTaskDetail() {
    // console.log('openTaskDetail(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_TASK_DETAIL, this.itemId);
  }


  doItToday() {
    // console.log('doItToday(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_ACTION_DOIT, this.itemId);
  }

  markAsDone() {
    // console.log('markAsDone(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_ACTION_DONE, this.itemId);
  }

  deferTillTomorrow() {
    // console.log('deferTillTomorrow(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_ACTION_DEFER, this.itemId);
  }

  moveToBacklog() {
    // console.log('moveToBacklog(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_ACTION_BACKLOG, this.itemId);
  }

  editThisItem() {
    // console.log('editThisItem(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_ACTION_EDIT, this.itemId);
  }

  deleteThisItem() {
    // console.log('deleteThisItem(). this.itemId = ' + this.itemId);
    this.events.publish(TaskEvents.MVP0_UI_TASK_CARD_ACTION_DELETE, this.itemId);
  }


}