import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { AlertController, ToastController, Events } from 'ionic-angular';
import { DualValue,HourRange, DateIdUtil } from '@canvuus-internal/mvp0-task-core';
import { AppUser, AppUserHelper } from '@canvuus-internal/mvp0-task-base';
import { UserProfile, UserPreference, UserProfileHelper, UserPreferenceHelper } from '@canvuus-internal/mvp0-task-data';
import { CommonColorAvatarComponent } from '../common-color-avatar/common-color-avatar';
import { CommonEvents } from '../../common/events/common-events';


@Component({
  selector: 'mvp0-user-settings',
  template: `
<ion-grid>
  <ion-row align-items-center>
    <ion-col align-self-start col-12>
      <ion-list>
        <ion-list-header>
          My Profile
        </ion-list-header>

        <ion-item>
          <!--<ion-input type="text" placeholder="Title" [disabled]="!data.isActive" [(ngModel)]="data.title"></ion-input>-->
          <ion-input type="text" placeholder="Nickname" [(ngModel)]="userProfile.nickname" (ngModelChange)="onUserProfileDataChange($event)"></ion-input>
        </ion-item>

        <ion-item>
          <ion-thumbnail item-left item-start>
            <a (click)="updatePrimaryPhoto()">
            <common-color-avatar #taskColorTag layer-size="6"></common-color-avatar>
            </a>
          </ion-thumbnail>
          <!--<textarea placeholder="Detail" [disabled]="!data.isActive" [(ngModel)]="data.description" style="border:none; min-height:120px; width:100%;"></textarea>-->
          <textarea placeholder="Short Bio" [(ngModel)]="userProfile.shortBio" (ngModelChange)="onUserProfileDataChange($event)" style="border:none; min-height:120px; width:100%;"></textarea>
        </ion-item>

        <ion-item>
          <ion-buttons end>
            <button ion-button icon-only clear [disabled]="!isDirty" (click)="cancelChange()"><ion-icon color="{{(isDirty) ? 'primary' : 'light'}}" name="close" ></ion-icon></button>
            <button ion-button icon-only clear [disabled]="!isDirty" (click)="saveChange()"><ion-icon color="{{(isDirty) ? 'primary' : 'light'}}" name="done-all" ></ion-icon></button>
          </ion-buttons>
        </ion-item>

      </ion-list>
    </ion-col>
  </ion-row>

  <ion-row align-items-center>
    <ion-col align-self-start col-12>
      <ion-list>
        <ion-list-header>
          App Preferences
        </ion-list-header>

        <ion-item>
          <ion-label>Morning Range</ion-label>
          <ion-range dualKnobs="true" [(ngModel)]="userPreference.amHours" (ngModelChange)="onUserPreferenceDataChange($event)" min="0"
            max="23" step="1" snaps="true" pin="true">
            <ion-label range-left>0</ion-label>
            <ion-label range-right>24</ion-label>
          </ion-range>
        </ion-item>

        <ion-item>
          <ion-label>Evening Range</ion-label>
          <ion-range dualKnobs="true" [(ngModel)]="userPreference.pmHours" (ngModelChange)="onUserPreferenceDataChange($event)" min="0"
            max="23" step="1" snaps="true" pin="true">
            <ion-label range-left>0</ion-label>
            <ion-label range-right>24</ion-label>
          </ion-range>
        </ion-item>

        <!--  Currently not being used.. -->
        <ion-item hidden="true">
          <ion-label>Max Tasks per Day</ion-label>
          <ion-range [(ngModel)]="userPreference.maxTasksPerDay" (ngModelChange)="onUserPreferenceDataChange($event)" min="1" max="10"
            step="1" snaps="true" pin="true">
            <ion-label range-left>1</ion-label>
            <ion-label range-right>10</ion-label>
          </ion-range>
        </ion-item>

      </ion-list>
    </ion-col>
  </ion-row>

  <ion-row align-items-center>
    <ion-col align-self-start col-12>
      <ion-list>
        <ion-list-header>
          Data Settings
        </ion-list-header>

        <ion-item>
          Delete all data
          <button ion-button outline item-right icon-left color="danger" style="min-width:120px;" (click)="handlePurgeData($event)"><ion-icon name="nuclear"></ion-icon>Purge</button>
        </ion-item>

        <ion-item>
          Export data
          <button ion-button outline item-right icon-left style="min-width:120px;" (click)="handleExportData($event)"><ion-icon name="download"></ion-icon>Download</button>
        </ion-item>

        <ion-item>
          <textarea #exportedDataArea placeholder="(Exported Data)" readonly="true" style="border:1px solid silver; min-height:100px; width:100%;"></textarea>
        </ion-item>

      </ion-list>
    </ion-col>
  </ion-row>

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

  @ViewChild('exportedDataArea') dataArea;

  private _originalUserProfile: UserProfile;
  userProfile: UserProfile;
  private _originalUserPreference: UserPreference;
  userPreference: UserPreference;

  // // temporary. userPreference.HourRange does not seem to work with ngModel data binding... 
  // amHours: DualValue;
  // pmHours: DualValue;


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

    // temporary
    this.userProfile = new UserProfile();
    this.userPreference = new UserPreference();
    // ....

    // // temporary. Initialized them to avoid null excetions.
    // this.amHours = { "lower": 8, "upper": 8 };
    // this.pmHours = { "lower": 18, "upper": 18 };
  }
  ngOnInit() {
    // console.log('Mvp0UserSettingsComponent: ::: ngOnInit()');

    if(this.dataArea) {
      this.dataArea.value = '';
    }
  }
  ngOnDestroy() {
    // console.log('Mvp0UserSettingsComponent: ::: ngOnDestroy()');
  }


  // temporary
  // amHours = { "lower": 3, "upper": 4 };
  // pmHours = { "lower": 10, "upper": 12 };

  // tbd
  refreshData(_userProfile: (UserProfile | null), _userPreference: (UserPreference | null)): void {
    console.log('Mvp0UserSettingsComponent: >>> refreshData() _userProfile = ' + _userProfile + '; _userPreference = ' + _userPreference);

    if (_userProfile) {
      this.userProfile = _userProfile.clone();  // ??
      this._originalUserProfile = this.userProfile.clone();
      console.log('Mvp0UserSettingsComponent: >>> refreshData() this.userProfile = ' + this.userProfile);
    } else {
      // Ingore
      // this.userProfile = new UserProfile();
    }

    if (_userPreference) {
      this.userPreference = _userPreference.clone();  // ??
      this._originalUserPreference = this.userPreference.clone();
      console.log('Mvp0UserSettingsComponent: >>> refreshData() this.userPreference = ' + this.userPreference);
    } else {
      // Ignore
      // this.userPreference = new UserPreference();
    }

    // // Refresh UI vars.
    // this.amHours = this.userPreference.amHours;
    // this.pmHours = this.userPreference.pmHours;

  }

  get isDirty(): boolean {
    return ((this.userProfile && this.userProfile.isDirty) || (this.userPreference && this.userPreference.isDirty));
  }

  cancelChange() {
    // console.log('Mvp0UserSettingsComponent: cancelChange()');

    if(this._originalUserProfile) {
      this.userProfile = this._originalUserProfile.clone();
    } // else ?
    if(this._originalUserPreference) {
      this.userPreference = this._originalUserPreference.clone();
    } // else ?
  }

  saveChange() {
    // console.log('Mvp0UserSettingsComponent: saveChange()');

    // tbd:
    // save the data first...
    this.events.publish(CommonEvents.MVP0_DATA_USERSETTINGS_UPDATE, this.userProfile, this.userPreference);

    // then
    // --> This should be done by the parent Page by calling refreshData()
    // ...
    // this._originalUserProfile = this.userProfile.clone();
    // this._originalUserPreference = this.userPreference.clone();
  }


  onUserProfileDataChange(event) {
    console.log('Mvp0UserSettingsComponent: onUserProfileDataChange(): event = ' + event);

    if (this.userProfile) {
      this.userProfile.isDirty = true;
    }
  }
  onUserPreferenceDataChange(event) {
    console.log('Mvp0UserSettingsComponent: onUserPreferenceDataChange(): event = ' + event);

    if (this.userPreference) {
      this.userPreference.isDirty = true;

      console.log("this.userPreference = " + this.userPreference);
    }
  }


  handleExportData(event) {
    // console.log("handleExportData() event = " + event);
    
    this.events.publish(CommonEvents.MVP0_DB_EXPORT_DATA);
  }

  handlePurgeData(event) {
    // console.log("handlePurgeData() event = " + event);
    
    this.events.publish(CommonEvents.MVP0_DB_PURGE_DATA);
  }

  setExportedDataContent(exportedData: string) {
    if(this.dataArea && this.dataArea.nativeElement) {
      this.dataArea.nativeElement.value = exportedData;
    }
  }
  resetExportedDataContent() {
    this.setExportedDataContent('');
  }


  // Testing
  updatePrimaryPhoto() {
    this.events.publish(CommonEvents.MVP0_UI_USERPROFILE_PRIMARY_PHOTO_UPDATE);  // Arg?
  }

}