import { Component } from '@angular/core';
import { AlertController, ToastController, Events } from 'ionic-angular';
import { DateIdUtil } from '@canvuus-internal/mvp0-task-core';
import { LoginOption, UserNickname, UserAccount } from '@canvuus-internal/mvp0-task-auth';
import { TaskStatus, TaskBit, UserProfile } from '@canvuus-internal/mvp0-task-data';
import { CommonEvents } from '../../common/events/common-events';
import { LocalUserService } from '../../services/local-user-service';

@Component({
  selector: 'mvp0-user-accounts',
  template: `
<ion-grid>

  <!-- TBD: Do not show the local account if at least one "real" account exists which can be used to login... -->

  <!--<ion-row align-items-center *ngIf="isShowLocalProfile">-->
  <ion-row align-items-center>
    <ion-col align-self-start col-12>
      <ion-card>
        <ion-card-content>
          <ion-card-title>
            {{localUserProfile.nickname}}
          </ion-card-title>
          <p>
            This is your default local account. Warning: Local account data will not be synch'ed with cloud database. If you use a web
            browser, the data may be lost.
          </p>
          <ion-list>
            <!--<ion-item *ngIf="isNewAccountAdditionAllowed">-->
            <ion-item>
              <button ion-button outline full icon-left [color]="(isNewAccountAdditionAllowed == true) ? 'danger' : 'dark'" [disabled]="(isNewAccountAdditionAllowed == true) ? false : true"
                (click)="handleActionAddNewAccount();"><ion-icon name="add-circle"></ion-icon>Add Account - Identity</button>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>

  <!-- TBD: We will need to use some kind of "cookie". 
  Show the following row only if the user is already logged on, or if the cookie includes the account nickname. -->

  <ion-row align-items-center *ngIf="isMainAccountAdded">
    <ion-col align-self-start col-12>
      <ion-card>
        <!--<img src="http://placehold.it/400x80.png">-->
        <ion-card-content>
          <ion-card-title>
            {{mainAccount.nickname}}
            <button ion-button icon-only clear (click)="handleActionChangeNickname();"><ion-icon name="color-wand"></ion-icon></button>
          </ion-card-title>
          <ion-list>
            <!--<ion-item *ngIf="!mainAccount.isAuthenticated">-->
            <ion-item>
              <button ion-button outline item-right icon-left style="min-width:160px;" (click)="handleActionAccountLogin();"><ion-icon name="log-in"></ion-icon>Login</button>
            </ion-item>
            <!--<ion-item *ngIf="mainAccount.isAuthenticated">-->
            <ion-item>
              <button ion-button outline item-right icon-left style="min-width:160px;" (click)="handleActionChangePassword();"><ion-icon name="build"></ion-icon>Change Password</button>
              <button ion-button outline item-right icon-left style="min-width:160px;" (click)="handleActionAccountLogout();"><ion-icon name="log-out"></ion-icon>Logout</button>
            </ion-item>
            <!--<ion-item *ngIf="mainAccount.isAuthenticated">-->
            <ion-item>
              <ion-label>Keep me logged in</ion-label>
              <ion-toggle [(ngModel)]="mainAccount.isKeepLoggedOnSet" (ngModelChange)="handleActionKeepLoggedOn($event);"></ion-toggle>
            </ion-item>

            <!-- TBD: Do not show the following if the user has not logged on. -->

            <ion-item *ngIf="mainAccount.hasPrimaryAuthIdentity">
              <ion-avatar item-left>
                <img src="http://placehold.it/40x40.png">
              </ion-avatar>
              <h2>{{mainAccount.primaryAuthIdentity.authId}}
                <button *ngIf="canDeletePrimaryIdentity" ion-button icon-only clear (click)="handleActionDeleteIdentity(1);"><ion-icon name="close"></ion-icon></button>
              </h2>
              <p>
                <button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionVerifyIdentity(1);"><ion-icon name="checkbox-outline"></ion-icon>Verify Identity</button>
                <button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionResetPassword(1);"><ion-icon name="build"></ion-icon>Reset Password</button>
                <!--<button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionUseForNotice(1);"><ion-icon name="notifications"></ion-icon>Use for Notice</button>-->
              </p>
            </ion-item>
            <ion-item *ngIf="mainAccount.hasPrimaryAuthIdentity">
              <ion-label>Use it for notifications</ion-label>
              <ion-toggle [(ngModel)]="mainAccount.primaryAuthIdentity.isEnabledForNotifications" (ngModelChange)="handleActionUseForNotice(1, $event);"></ion-toggle>
            </ion-item>

            <ion-item *ngIf="mainAccount.hasSecondaryAuthIdentity">
              <ion-avatar item-left>
                <img src="http://placehold.it/40x40.png">
              </ion-avatar>
              <h2>{{mainAccount.secondaryAuthIdentity.authId}}
                <button *ngIf="canDeleteSecondaryIdentity" ion-button icon-only clear (click)="handleActionDeleteIdentity(2);"><ion-icon name="close"></ion-icon></button>
              </h2>
              <p>
                <button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionVerifyIdentity(2);"><ion-icon name="checkbox-outline"></ion-icon>Verify Identity</button>
                <button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionResetPassword(2);"><ion-icon name="build"></ion-icon>Reset Password</button>
                <!--<button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionUseForNotice(2);"><ion-icon name="notifications"></ion-icon>Use for Notice</button>-->
              </p>
            </ion-item>
            <ion-item *ngIf="mainAccount.hasSecondaryAuthIdentity">
              <ion-label>Use it for notifications</ion-label>
              <ion-toggle [(ngModel)]="mainAccount.secondaryAuthIdentity.isEnabledForNotifications" (ngModelChange)="handleActionUseForNotice(2, $event);"></ion-toggle>
            </ion-item>

            <ion-item *ngIf="mainAccount.hasTertiaryAuthIdentity">
              <ion-avatar item-left>
                <img src="http://placehold.it/40x40.png">
              </ion-avatar>
              <h2>{{mainAccount.tertiaryAuthIdentity.authId}}
                <button *ngIf="canDeleteTertiaryIdentity" ion-button icon-only clear (click)="handleActionDeleteIdentity(3);"><ion-icon name="close"></ion-icon></button>
              </h2>
              <p>
                <button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionVerifyIdentity(3);"><ion-icon name="checkbox-outline"></ion-icon>Verify Identity</button>
                <button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionResetPassword(3);"><ion-icon name="build"></ion-icon>Reset Password</button>
                <!--<button ion-button outline item-left icon-left style="min-width:140px;" (click)="handleActionUseForNotice(3);"><ion-icon name="notifications"></ion-icon>Use for Notice</button>-->
              </p>
            </ion-item>
            <ion-item *ngIf="mainAccount.hasTertiaryAuthIdentity">
              <ion-label>Use it for notifications</ion-label>
              <ion-toggle [(ngModel)]="mainAccount.tertiaryAuthIdentity.isEnabledForNotifications" (ngModelChange)="handleActionUseForNotice(3, $event);"></ion-toggle>
            </ion-item>

            <ion-item *ngIf="!isAllIdentitiesAdded">
              Add new identity (email or phone)
              <button ion-button outline item-right icon-left style="min-width:140px;" (click)="handleActionAddNewIdentity();"><ion-icon name="add"></ion-icon>Add New</button>
            </ion-item>
          </ion-list>

          <!-- TBD: Temporarily commented out. For now, you cannot really "delete" a single main account. -->
          <ion-list>
            <ion-item>
              <p>Delete This Account:</p>
              <p>
                <button ion-button outline item-left icon-left style="min-width:160px;" (click)="handleActionDeleteAccount();"><ion-icon name="trash"></ion-icon>Delete Account</button>
              </p>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>

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

  <!-- TBD: Temporarily commented out. For now, we only support a single (non-local) account. -->
  <!--<ion-row align-items-center>
    <ion-col align-self-start col-12>
      <ion-list>
        <ion-item>
          <button ion-button outline item-left icon-left style="min-width:160px;" (click)="handleActionAddNewAccount();"><ion-icon name="add-circle"></ion-icon>Add New Account</button>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>-->

</ion-grid>
`
})
export class Mvp0UserAccountsComponent {

  // Temporary
  // localAccountNickname: string;
  // public data: UserAccount[];

  // tbd:
  private loginOption: LoginOption;
  private userNickname: UserNickname;
  // public activeAccount: UserAccount;
  private mainAccount: UserAccount;   // For now, one account only.
  // ...
  localUserProfile: UserProfile;
  // ...


  get isShowLocalProfile(): boolean {
    if (this.localUserProfile && this.localUserProfile.nickname) {
      return !this.isMainAccountAdded;
    } else {
      return false;
    }
  }

  // isMainAccountAdded = false;
  get isMainAccountAdded(): boolean {
    if (this.mainAccount && this.mainAccount.isInitialized) {
      return true;
    } else {
      return false;
    }
  }
  get isNewAccountAdditionAllowed(): boolean {
    // for now, we allow one main account only.
    return !this.isMainAccountAdded;
    // if (this.loginOption && this.loginOption.defaultAccountNickname) {
    //   return false;
    // } else {
    //   return true;
    // }
  }

  // isPrimaryIdentityAdded = false;
  get isPrimaryIdentityAdded(): boolean {
    if (this.mainAccount && this.mainAccount.hasPrimaryAuthIdentity) {
      return true;
    } else {
      return false;
    }
  }
  get isPrimaryIdentityValidated(): boolean {
    if (this.mainAccount && this.mainAccount.hasPrimaryAuthIdentity && this.mainAccount.primaryAuthIdentity && this.mainAccount.primaryAuthIdentity.isTokenValidated) {
      return true;
    } else {
      return false;
    }
  }
  // ????
  isPrimaryIdentityAuthenticated = false;

  // isSecondaryIdentityAdded = false;
  get isSecondaryIdentityAdded(): boolean {
    if (this.mainAccount && this.mainAccount.hasSecondaryAuthIdentity) {
      return true;
    } else {
      return false;
    }
  }
  get isSecondaryIdentityValidated(): boolean {
    if (this.mainAccount && this.mainAccount.hasSecondaryAuthIdentity && this.mainAccount.secondaryAuthIdentity && this.mainAccount.secondaryAuthIdentity.isTokenValidated) {
      return true;
    } else {
      return false;
    }
  }
  // ????
  isSecondaryIdentityAuthenticated = false;

  // isTertiaryIdentityAdded = false;
  get isTertiaryIdentityAdded(): boolean {
    if (this.mainAccount && this.mainAccount.hasTertiaryAuthIdentity) {
      return true;
    } else {
      return false;
    }
  }
  get isTertiaryIdentityValidated(): boolean {
    if (this.mainAccount && this.mainAccount.hasTertiaryAuthIdentity && this.mainAccount.tertiaryAuthIdentity && this.mainAccount.tertiaryAuthIdentity.isTokenValidated) {
      return true;
    } else {
      return false;
    }
  }
  // ????
  isTertiaryIdentityAuthenticated = false;

  // Note that we currently support max of 3 identities per account.
  get isAllIdentitiesAdded(): boolean {
    return this.isPrimaryIdentityAdded && this.isSecondaryIdentityAdded && this.isTertiaryIdentityAdded;
  }
  get hasAtLeastOneIdentity(): boolean {
    return this.isPrimaryIdentityAdded || this.isSecondaryIdentityAdded || this.isTertiaryIdentityAdded;
  }
  get isAccountAuthenticated(): boolean {
    return this.isPrimaryIdentityAuthenticated || this.isSecondaryIdentityAuthenticated || this.isTertiaryIdentityAuthenticated;
  }
  // ...

  // tbd:
  get canDeletePrimaryIdentity(): boolean {
    // return (this.isPrimaryIdentityAdded && !this.isSecondaryIdentityAdded);
    return false;
  }
  get canDeleteSecondaryIdentity(): boolean {
    return (this.isSecondaryIdentityAdded && !this.isTertiaryIdentityAdded);
  }
  get canDeleteTertiaryIdentity(): boolean {
    return (this.isTertiaryIdentityAdded);
  }


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

    // TBD:
    // this.localAccountNickname = 'Joe';

    // Note that all UI-accessed variables should be initialized here in some way
    //    to avoid null pointer exception....

    // temporary
    // this.data = [];
    // this.activeAccount = null;
    let userId = this.localUserService.currentUserId;
    this.loginOption = new LoginOption();
    this.userNickname = new UserNickname(userId);
    this.mainAccount = new UserAccount(userId);
    this.localUserProfile = new UserProfile(userId);
    // ...
  }

  // // tbd
  // // refreshData(_data: UserAccount[]): void {
  // //   console.log('Mvp0UserAccountsComponent: >>> refreshData() _data = ' + (_data) ? _data.toString() : "");
  // //   if (_data) {
  // //     let list: UserAccount[] = [];
  // //     for(let ua of _data) {
  // //       list.push(ua.clone());
  // //     }
  // //     this.data = list;
  // //   }
  // //   console.log('Mvp0UserAccountsComponent: >>> refreshData() this.data = ' + this.data.toString());
  // // }
  // refreshData(_mainAccount: UserAccount): void {
  //   console.log('Mvp0UserAccountsComponent: >>>>> refreshData() _mainAccount = ' + _mainAccount);

  //   if (_mainAccount) {
  //     this.mainAccount = _mainAccount.clone();
  //   } else {
  //     // ???
  //   }

  //   console.log('Mvp0UserAccountsComponent: >>> refreshData() this.mainAccount = ' + this.mainAccount);
  // }


  refreshLoginOption(_loginOption: LoginOption) {
    console.log('Mvp0UserAccountsComponent: >>>>> refreshLoginOption() _loginOption = ' + _loginOption);

    if (_loginOption) {
      this.loginOption = _loginOption.clone();


    } else {
      // ???
    }
  }

  refreshUserNickname(_userNickname: UserNickname) {
    console.log('Mvp0UserAccountsComponent: >>>>> refreshUserNickname() _userNickname = ' + _userNickname);

    if (_userNickname) {
      this.userNickname = _userNickname.clone();


    } else {
      // ???
    }
  }

  refreshMainAccount(_userAccount: UserAccount) {
    console.log('Mvp0UserAccountsComponent: >>>>> refreshMainAccount() _userAccount = ' + _userAccount);

    if (_userAccount) {
      this.mainAccount = _userAccount.clone();

      // temporary
      // this.isMainAccountAdded = true;


    } else {
      // ???
    }
  }

  refreshLocalUserProfile(_userProfile: UserProfile) {
    console.log('Mvp0UserAccountsComponent: >>>>> refreshLocalUserProfile() _userProfile = ' + _userProfile);

    if (_userProfile) {
      this.localUserProfile = _userProfile.clone();


    } else {
      // ???
    }
  }


  handleActionAddNewAccount() {
    // console.log('Mvp0UserAccountsComponent: handleActionAddNewAccount()');
    this.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_CREATE);
  }

  handleActionDeleteAccount() {
    // console.log('Mvp0UserAccountsComponent: handleActionDeleteAccount()');

    let alert = this.alertCtrl.create({
      title: 'Remove Account',
      message: 'Do you want to delete this account from your account list?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Mvp0UserAccountsComponent: Cancel clicked');
          }
        },
        {
          text: 'Remove',
          handler: () => {
            console.log('Mvp0UserAccountsComponent: Remove clicked');
            // tbd:
            this.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_DELETE, this.mainAccount);
          }
        }
      ]
    });
    alert.present();
  }


  handleActionAccountLogin() {
    // console.log('Mvp0UserAccountsComponent: handleActionAccountLogin()');
    this.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_LOGIN, this.mainAccount);
  }
  handleActionAccountLogout() {
    // console.log('Mvp0UserAccountsComponent: handleActionAccountLogout()');
    this.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_LOGOUT, this.mainAccount);
  }

  handleActionChangeNickname() {
    // console.log('Mvp0UserAccountsComponent: handleActionChangeNickname()');
    this.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_CHANGENAME, this.mainAccount);
  }

  handleActionChangePassword() {
    // console.log('Mvp0UserAccountsComponent: handleActionChangePassword()');

    let alert = this.alertCtrl.create({
      title: 'Change Password',
      message: 'Please specify old and new passwords.',
      inputs: [
        {
          name: 'oldPassword',
          placeholder: 'Old Password'
        },
        {
          name: 'newPassword',
          placeholder: 'New Password'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Mvp0UserAccountsComponent: Cancel clicked');
          }
        },
        {
          text: 'Confirm',
          handler: data => {
            let that = this;
            if (data.oldPassword && data.newPassword) {
              // TBD:
              let oldpword = data.oldPassword as string;
              let newpword = data.newPassword as string;
              // console.log('Mvp0UserAccountsComponent: Confirm clicked.');
              that.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_CHANGEPASS, oldpword, newpword);
              // return true;
            } else {
              // tbd:
              // just cancel?
              console.log('Mvp0UserAccountsComponent: Passwords not specified.');
              // return false;
            }
            return true;
          }
        }
      ]
    });
    alert.present();
  }

  handleActionKeepLoggedOn(event) {
    console.log('Mvp0UserAccountsComponent: handleActionKeepLoggedOn(). event = ' + event);

    let isOn = event;
    this.events.publish(CommonEvents.MVP0_AUTH_ACCOUNT_KEEPLOGGEDON, isOn);
  }


  handleActionVerifyIdentity(identityOrdinal: number) {
    // console.log('Mvp0UserAccountsComponent: handleActionVerifyIdentity(). identityOrdinal + ' + identityOrdinal);

    // tbd
    let authId = "";

    let alert = this.alertCtrl.create({
      title: 'Verify Identity',
      message: 'Please input validation token for ' + authId,
      inputs: [
        {
          name: 'validationToken',
          placeholder: 'Token'
        }
      ],
      buttons: [
        {
          text: 'Resend',
          handler: data => {
            console.log('Mvp0UserAccountsComponent: Resend clicked');
            // ...

          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Mvp0UserAccountsComponent: Cancel clicked');
          }
        },
        {
          text: 'Validate',
          handler: data => {
            let that = this;
            if (data.validationToken) {
              // TBD:
              let token = data.validationToken as string;
              console.log('Mvp0UserAccountsComponent: Validate clicked: token = ' + token);
              that.events.publish(CommonEvents.MVP0_AUTH_IDENTITY_VERIFY, identityOrdinal, token);
              // return true;
            } else {
              // tbd:
              // just cancel?
              console.log('Mvp0UserAccountsComponent: token not specified.');
              // return false;
            }
            return true;
          }
        }
      ]
    });
    alert.present();
  }

  handleActionResetPassword(identityOrdinal: number) {
    // console.log('Mvp0UserAccountsComponent: handleActionResetPassword(). identityOrdinal + ' + identityOrdinal);

    // TBD:
    // Start token request process here ????
    // .....

    // tbd
    let authId = "";

    let alert = this.alertCtrl.create({
      title: 'Reset Password',
      message: 'Please input validation token for ' + authId + ', and a new password.',
      inputs: [
        {
          name: 'validationToken',
          placeholder: 'Token'
        },
        {
          name: 'newPassword',
          placeholder: 'New Password'
        }
      ],
      buttons: [
        {
          text: 'Reset',
          handler: data => {
            console.log('Mvp0UserAccountsComponent: Reset clicked');
            // ...

          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Mvp0UserAccountsComponent: Cancel clicked');
          }
        },
        {
          text: 'Confirm',
          handler: data => {
            let that = this;
            if (data.validationToken) {
              // TBD:
              let token = data.validationToken as string;
              let newpword = data.newPassword as string;
              console.log('Mvp0UserAccountsComponent: Confirm clicked: token = ' + token);
              that.events.publish(CommonEvents.MVP0_AUTH_IDENTITY_RESETPASS, identityOrdinal, token, newpword);
              // return true;
            } else {
              // tbd:
              // just cancel?
              console.log('Mvp0UserAccountsComponent: token not specified.');
              // return false;
            }
            return true;
          }
        }
      ]
    });
    alert.present();
  }

  // TBD: Use toggle button???
  handleActionUseForNotice(identityOrdinal: number, event) {
    console.log('Mvp0UserAccountsComponent: handleActionUseForNotice(). identityOrdinal + ' + identityOrdinal + '; event = ' + event);

    // tbd:
    let isOn = event as boolean;
    this.events.publish(CommonEvents.MVP0_AUTH_IDENTITY_SETACTIVE, identityOrdinal, isOn);
  }


  handleActionAddNewIdentity() {
    // console.log('Mvp0UserAccountsComponent: handleActionAddNewIdentity()');

    if (this.isTertiaryIdentityAdded) {
      // ignore
      // No more identities can be added.
    } else {
      // 1-based, not 0-based.
      let identityOrdinal: number = -1;  // Invalid
      if (this.isSecondaryIdentityAdded) {
        identityOrdinal = 3;
      } else {
        if (this.isPrimaryIdentityAdded) {
          identityOrdinal = 2;
        } else {
          // this cannot happen..
          identityOrdinal = 1;
        }
      }

      let alert = this.alertCtrl.create({
        title: 'New Identity',
        message: 'Please specify a new email or phone number.',
        inputs: [
          {
            name: 'userEmail',
            placeholder: 'Email or Phone'
          }
        ],
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: data => {
              console.log('Mvp0UserAccountsComponent: Cancel clicked');
            }
          },
          {
            text: 'OK',
            handler: data => {
              let that = this;
              if (data.userEmail) {
                // TBD:
                // validate ???
                // email should contain at least '@'...
                // phone number should be all numbers and '-'....
                let emailOrPhone = data.userEmail as string;
                console.log('Mvp0UserAccountsComponent: OK clicked: emailOrPhone = ' + emailOrPhone);
                that.events.publish(CommonEvents.MVP0_AUTH_IDENTITY_CREATE, identityOrdinal, emailOrPhone);
                // return true;
              } else {
                // tbd:
                // just cancel?
                console.log('Mvp0UserAccountsComponent: userEmail not specified.');
                // return false;
              }
              return true;
            }
          }
        ]
      });
      alert.present();
    }
  }

  // Currently not being used.
  // For now, you cannot deleted an identity once added.
  handleActionDeleteIdentity(identityOrdinal: number) {
    // console.log('Mvp0UserAccountsComponent: handleActionDeleteIdentity() identityOrdinal = ' + identityOrdinal);

    // tbd:
    // check first if the identity of the given identityOrdinal can be deleted??
    // ....

    let alert = this.alertCtrl.create({
      title: 'Remove Identity',
      message: 'Do you want to delete this identity from your account?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Mvp0UserAccountsComponent: Cancel clicked');
          }
        },
        {
          text: 'Remove',
          handler: () => {
            console.log('Mvp0UserAccountsComponent: Remove clicked');
            // tbd:
            this.events.publish(CommonEvents.MVP0_AUTH_IDENTITY_DELETE, identityOrdinal);
          }
        }
      ]
    });
    alert.present();
  }

}