import {Component} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {Router} from '@angular/router';
import {AuthService} from '../../auth.service';
import {RoleService} from '../../auth/role.service';

@Component({
  selector: 'settings',
  directives: [ CORE_DIRECTIVES ],
  template: `
  <div class="row">
    <div class="col-xs-12 text-xs-center">
      Username: <strong>{{user()?.attributes?.username}}</strong><br/>
      Member Since: <strong>{{user()?.createdAt | date}}</strong><br/>
      Role: <strong>{{roleService.role?.attributes?.displayName}}</strong>
      <hr/>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 style="margin-bottom:0px;">Change Password</h5>
          <small>Use this form to change your password to a new one.</small>
        </div>
        <div class="card-block">
          <form (ngSubmit)="changePassword()">
            <fieldset class="form-group">
              <label>New Password</label>
              <input type="password" class="form-control" autocomplete="off" name="password"
                placeholder="Enter password" [(ngModel)]="password">
            </fieldset>
            <fieldset class="form-group">
              <label>Confirm New Password</label>
              <input type="password" class="form-control" autocomplete="off" name="passwordConfirm"
                placeholder="Repeat password" [(ngModel)]="passwordConfirm">
            </fieldset>
            <div *ngIf="passwordChangeMessage.length > 0 && !passwordChangeInProgress">
              <div class="alert alert-danger" role="alert">
                <i class="fa fa-exclamation-triangle"></i> {{passwordChangeMessage}}
              </div>
            </div>
            <small>
              When the password is changed you will be signed out and will have to sign in again with your new password.
            </small>
            <hr/>
            <div class="text-xs-center">
              <button type="submit" class="btn btn-primary"><i class="fa fa-floppy-o"></i> Change Password</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">

    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div class="card">
        <div class="card-header">
          <h5 style="margin-bottom:0px;">Log Out</h5>
          <small>Sign out of your account.</small>
        </div>
        <div class="card-block text-xs-center">
          <button class="btn btn-danger" (click)="logout()"><i class="fa fa-sign-out"></i> Log Out</button>
        </div>
      </div>
    </div>
  </div>`
})

export class GeneralSettingsComponent {
  private password: string = '';
  private passwordConfirm: string = '';
  private passwordChangeInProgress = false;
  private passwordChangeMessage = '';

  constructor(private router: Router, private authService: AuthService, private roleService: RoleService) { }

  user() {
    return this.authService.user();
  }

  changePassword() {
    if (!this.password || !this.passwordConfirm) {
      this.passwordChangeMessage = 'Please enter a password and confirm it.';
      return;
    }

    if (this.passwordConfirm !== this.password) {
      this.passwordChangeMessage = 'New passwords do not match.';
      return;
    }

    if (this.password.length < 5) {
      this.passwordChangeMessage = 'Password must be longer than 4 characters.';
      return;
    }

    this.passwordChangeInProgress = true;

    this.authService.changePassword(this.password).then(success => {
        this.authService.logout();
        this.router.navigateByUrl('../login');
    }, error => {
      this.passwordChangeInProgress = false;
      this.passwordChangeMessage = 'Password Update Failed! ' + error.message;
      alert(JSON.stringify(error));
    });
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('/login');
  }
}