import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { AlertController, ToastController, Events } from 'ionic-angular';
import { DateIdUtil } from '@canvuus-internal/mvp0-task-core';
import { UniversalNote } from '@canvuus-internal/mvp0-task-data';
import { CommonTextEntryComponent, CommonMarkEntryComponent } from '@canvuus-internal/mvp0-task-mark';
// import { CommonMarkEditorComponent } from '@canvuus-internal/mvp0-task-mark';
import { MarkEvents } from '@canvuus-internal/mvp0-task-mark';
import { LocalUserService } from '@canvuus-internal/mvp0-task-view';
import { CommonEvents } from '@canvuus-internal/mvp0-task-view';


@Component({
  selector: 'mvp0-universal-note',
  // templateUrl: 'mvp0-universal-note.html'
  template: `
<ion-grid>
  <ion-row align-items-center>
    <ion-col align-self-start col-12>
      <ion-card>
        <!--<img src="http://placehold.it/400x80.png">-->
        <!--<img src="assets/img/sunrise3.png" width="600" height="90">-->
        <ion-card-content>
          <!--<ion-card-title>
            {{title}}
          </ion-card-title>-->
          <div style="min-height:280px;">
            <ion-list>
              <ion-item>
                <!--<input type="text" value="{{title}}" [disabled]="isShowHTML" (ngModelChange)="titleChanged($event)" style="width:100%; padding:4px; font-weight:500; font-size:1.2em;">-->
                <!--<input type="text" [(ngModel)]="data.title" (change)="titleChanged($event)" [disabled]="isShowHTML" style="width:100%; padding:4px; font-weight:500; font-size:1.2em;">-->
                <input type="text" [ngModel]="data.title" (ngModelChange)="titleChanged($event)" [disabled]="isShowHTML" style="width:100%; padding:4px; font-weight:500; font-size:1.2em;">
              </ion-item>
              <!--<ion-item>
                <textarea #noteTextArea placeholder="(Note)" style="border:1px solid silver; min-height:200px; width:100%;"></textarea>
              </ion-item>-->
              <ion-item [hidden]="!isShowHTML">
                <!--<common-mark-entry #commonMarkEntry markdown="Hello *emph* world."></common-mark-entry>-->
                <common-mark-entry #commonMarkEntry></common-mark-entry>
              </ion-item>
              <ion-item [hidden]="isShowHTML">
                <!--<common-text-entry #commonTextEntry text="Hello *emph* world."></common-text-entry>-->
                <common-text-entry #commonTextEntry></common-text-entry>
              </ion-item>
              <!--<ion-item>
                <common-mark-editor #commonMarkEditor markdown="Hello *emph* world."></common-mark-editor>
              </ion-item>-->
            </ion-list>
          </div>
          <p>
            <button ion-button color="primary" full [disabled]="isShowHTML || !data.isDirty" (click)="saveNote()">Save</button>
          </p>
        </ion-card-content>
        <ion-fab top right>
          <button ion-fab mini clear color="primary" (click)="flipMarkdownHTMLView($event)"><ion-icon name="swap"></ion-icon></button>
        </ion-fab>
      </ion-card>

      <!--<ion-card>
        <ion-card-content>
          <p>
            <button ion-button color="primary" full disabled="false" (click)="saveNote()">Save</button>
          </p>
        </ion-card-content>
      </ion-card>-->

    </ion-col>
  </ion-row>
</ion-grid>
`
})
export class Mvp0UniversalNoteComponent implements OnInit, OnDestroy {

  @ViewChild("commonTextEntry") commonTextEntry: CommonTextEntryComponent;
  @ViewChild("commonMarkEntry") commonMarkEntry: CommonMarkEntryComponent;
  // @ViewChild("commonMarkEditor") commonMarkEditor: CommonMarkEditorComponent;

  // temporary
  // title: string;
  data: UniversalNote;

  _isShowHTML: boolean = false;
  get isShowHTML(): boolean {
    return this._isShowHTML;
  }
  set isShowHTML(_isShowHTML: boolean) {
    this._isShowHTML = _isShowHTML;
    // tbd: refresh the screen????
  }
  flipMarkdownHTMLView(event) {
    this.isShowHTML = !this._isShowHTML;
  }


  private _textChangedEventHandler: (newText: string) => void;

  constructor(private alertCtrl: AlertController,
    private toastCtrl: ToastController,
    private events: Events,
    private localUserService: LocalUserService
  ) {
    // console.log('Hello Mvp0UniversalNote Component');
    this._textChangedEventHandler = (newText: string) => {
      this.udpateMarkdownText(newText);
    }

    // temporary
    this.data = new UniversalNote();
    this.data.userId = this.localUserService.currentUserId;
    // ....

    // tbd....
    // this.title = '(Title)';
  }
  ngOnInit() {
    // console.log('::: ngOnInit()');
    this.events.subscribe(MarkEvents.MVP0_TEXT_ENTRY_TEXT_CHANGED, this._textChangedEventHandler);
  }
  ngOnDestroy() {
    // console.log('::: ngOnDestroy()');
    this.events.unsubscribe(MarkEvents.MVP0_TEXT_ENTRY_TEXT_CHANGED, this._textChangedEventHandler);
  }

  // titleChanged(newTitle) {
  //   console.log('titleChanged(): newTitle = ' + newTitle);
  //   this.data.setTitle(newTitle);
  // }
  // titleChanged(event) {
  //   console.log('titleChanged(): event = ' + event);
  //   this.data.isDirty = true;
  // }
  titleChanged(newTitle) {
    console.log('Mvp0UniversalNoteComponent: titleChanged(): newTitle = ' + newTitle);
    this.data.setTitle(newTitle);
  }

  udpateMarkdownText(newText) {
    // console.log('udpateMarkdownText(): newText = ' + newText);

    this.data.setMarkdownText(newText);

    // Not needed, obviously.
    // this.commonTextEntry.setTextInput(newText);

    let showDebugLog = false;
    this.commonMarkEntry.setMarkdownInput(newText, showDebugLog);
  }

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

    if (_data) {
      this.data = _data.clone();  // ??
    } else {
      // ????
    }
    // tbd....
    // if (this.data.title) {
    //   this.title = this.data.title;
    // } else {
    //   // ????
    //   // let todayId = this.localUserService.todayId;
    //   // this.title = DateIdUtil.getLocaleDateString(todayId);
    //   this.title = '';
    // }

    // ????
    if (!this.data.markdownText) {
      this.data.markdownText = '';
    }
    this.commonTextEntry.setTextInput(this.data.markdownText);
    this.commonMarkEntry.setMarkdownInput(this.data.markdownText);

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


  saveNote(): void {
    // console.log('saveNote()');
    // // console.log('%%%%%%%% saveNote(): this.data = ' + this.data);

    // ???
    if (this.data.isSynched) {
      this.events.publish(CommonEvents.MVP0_DATA_UNIVERSALNOTE_UPDATE, this.data);
    } else {
      this.events.publish(CommonEvents.MVP0_DATA_UNIVERSALNOTE_CREATE, this.data);
    }
    // this.events.publish(CommonEvents.MVP0_NAV_DISMISS_SELF, true);

    // tbd:
    // This should be really done by the parent, but just as a shortcut...
    //   (note: this should not be necessary if we dismiss the dialog after saving...)
    this.data.isDirty = false;   // This can be a problem, if saving fails in the parent page....
    // ...
  }


}