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

@Component({
  selector: 'mvp0-task-backlog',
  // templateUrl: 'mvp0-task-backlog.html',
  template: `
<!-- TBD: This check should be done against all data not just loaded items. -->
<ion-list no-lines *ngIf="data.hasFutureTargetedLoadedItems">
  <ion-list-header>
    Future Tasks
  </ion-list-header>

  <!--<ion-item>
    <ion-avatar item-left><img src="http://placehold.it/40.png/0aa"></ion-avatar>
    <h2>
      <a (click)="displayEditTaskPage()">Todo 1</a>
    </h2>
    <p>I've got enough on my plate as it is, and I...</p>
  </ion-item>-->

  <ng-template ngFor let-item [ngForOf]="data.futureTargetedLoadedItems">
    <mvp0-task-entry [show-doittoday]="!item.isDone && !item.isForToday" [iid]="item.id" [ictag]="item.ctag" 
      [grayscale]="isGray(item)"
      [ititle]="item.title" 
      [idescription]="(item.description) ? item.description : '.'"></mvp0-task-entry>
    <!--<button ion-button end icon-only clear color="dark" (click)="doItToday()"><ion-icon name="sunny" ></ion-icon></button>-->
  </ng-template>

</ion-list>

<!-- Since the new button is displayed with this list, do not ngIf. -->
<!--<ion-list no-lines *ngIf="data.hasFloatingLoadedItems">-->
<ion-list no-lines>
  <ion-fab top right>
    <button ion-fab mini color="secondary" (click)="displayNewTaskPage()"><ion-icon name="add"></ion-icon></button>
  </ion-fab>

  <ion-list-header>
    Task Backlog
  </ion-list-header>

  <!--<ion-item>
    <ion-avatar item-left><img src="http://placehold.it/40.png/a73"></ion-avatar>
    <h2>
      <a (click)="displayEditTaskPage()">Task a</a>
    </h2>
    <p>I've got enough on my plate as it is, and I...</p>
  </ion-item>-->

  <ng-template ngFor let-item [ngForOf]="data.floatingLoadedItems">
    <mvp0-task-entry [show-doittoday]="!item.isDone && !item.isForToday" [iid]="item.id" [ictag]="item.ctag" [itargetdate]="item.targetDate" 
      [grayscale]="isGray(item)"
      [ititle]="item.title" 
      [idescription]="(item.description) ? item.description : '.'"></mvp0-task-entry>
    <!--<button ion-button end icon-only clear color="dark" (click)="doItToday()"><ion-icon name="sunny" ></ion-icon></button>-->
  </ng-template>


</ion-list>

<!-- tbd: "Show More" button??? -->
`
})
export class Mvp0TaskBacklogComponent implements OnInit, OnDestroy {

  // If true, the color tag will use grayscale for resolved items.
  @Input("color-changeable") isColorChangeEnabled: boolean;

  private _taskEntryViewEventHandler: (itemId: string) => void;
  private _taskEntryDoItEventHandler: (itemId: string) => void;

  // text: string;
  data: TaskBacklog;

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

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

    this._taskEntryViewEventHandler = (itemId: string) => {
      this.displayEditTaskPage(itemId);
    }
    this._taskEntryDoItEventHandler = (itemId: string) => {
      this.confirmForDoItToday(itemId);
    }

    // temporary
    this.data = new TaskBacklog();
    // ....

  }
  ngOnInit() {
    // console.log('::: ngOnInit()');
    this.events.subscribe(TaskEvents.MVP0_UI_TASK_ENTRY_VIEW, this._taskEntryViewEventHandler);
    this.events.subscribe(TaskEvents.MVP0_UI_TASK_ENTRY_DOIT, this._taskEntryDoItEventHandler);
  }
  ngOnDestroy() {
    // console.log('::: ngOnDestroy()');
    this.events.unsubscribe(TaskEvents.MVP0_UI_TASK_ENTRY_VIEW, this._taskEntryViewEventHandler);
    this.events.unsubscribe(TaskEvents.MVP0_UI_TASK_ENTRY_DOIT, this._taskEntryDoItEventHandler);
  }

  isGray(item: TaskItem): boolean {
    return this.isColorChangeEnabled && ((item) ? item.isResolved : false);
  }


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

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

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



  displayEditTaskPage(itemId: string) {
    // ????
    let item = this.data.getItemFromLoaded(itemId);
    if (item) {
      // This seems to lose type information....

      // heck
      // There seems to be a problem. Some weird empty tasks show up in the backlog list for some reason.
      //   In such a case, just make it a brand new task.....
      if(item.status == TaskStatus.unknown) {
        item.setStatus(TaskStatus.ready);   // ???
      }
      // heck

      this.events.publish(TaskEvents.MVP0_UI_TASK_EDIT, item);
      // this.events.publish(TaskEvents.MVP0_UI_TASK_EDIT, item.getDocId());
    } else {
      // what to do?
      console.log("Mvp0TaskBacklogComponent: TaskItem not found for itemId = " + itemId);
    }
  }

  displayNewTaskPage() {
    // console.log("displayNewTaskPage()");

    // tbd:
    // item.targetDate should be set to null, by default, if the task is created from the backlog page...
    //   (currently, item.targetDate is automatically set to today in the TaskItem.ctor.)
    // .....
    this.events.publish(TaskEvents.MVP0_UI_TASK_NEW);
  }

  confirmForDoItToday(itemId: string) {
    // console.log("confirmForDoItToday()");
    // tbd...

    let item = this.data.getItemFromLoaded(itemId);
    if (item) {

      // Show confirm dialog....
      let alert = this.alertCtrl.create({
        title: 'Do It Today',
        message: 'Do you want to do this task today?',
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {
              // console.log('Cancel clicked');
            }
          },
          {
            text: 'Do it!',
            handler: () => {
              // console.log('DoIt clicked');

              // ???
              if(item) {
                item.setTargetDate(DateIdUtil.getTodayId());
                item.setStatus(TaskStatus.ready);
                this.events.publish(CommonEvents.MVP0_DATA_TASKITEM_UPDATE, item, TaskActions.ACTION_UPDATED_FOR_TODAY);
              }
            }
          }
        ]
      });
      alert.present();
    } else {
      // what to do?
      console.log("Mvp0TaskBacklogComponent: TaskItem not found for itemId = " + itemId);
    }
  }

}