import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ValidationService } from './../../providers/validation.service';
import { SubjectService } from './../../providers/subject.service';
import { WebService } from './../../providers/web.service';
import {Location} from '@angular/common';


@Component({
  selector: 'app-changepin',
  templateUrl: './changepin.component.html',
  styleUrls: ['./changepin.component.scss']
})
export class ChangepinComponent implements OnInit {
  @ViewChild('old1') old1: ElementRef;
  @ViewChild('old2') old2: ElementRef;
  @ViewChild('old3') old3: ElementRef;
  @ViewChild('old4') old4: ElementRef;
  @ViewChild('old5') old5: ElementRef;
  @ViewChild('old6') old6: ElementRef;

  @ViewChild('new1') new1: ElementRef;
  @ViewChild('new2') new2: ElementRef;
  @ViewChild('new3') new3: ElementRef;
  @ViewChild('new4') new4: ElementRef;
  @ViewChild('new5') new5: ElementRef;
  @ViewChild('new6') new6: ElementRef;

  @ViewChild('conf1') conf1: ElementRef;
  @ViewChild('conf2') conf2: ElementRef;
  @ViewChild('conf3') conf3: ElementRef;
  @ViewChild('conf4') conf4: ElementRef;
  @ViewChild('conf5') conf5: ElementRef;
  @ViewChild('conf6') conf6: ElementRef;

  error_msg: any[];
  lang =  'en';
  model: any;
  passwordErr: boolean;
  newpasswordErr: boolean;
  confpasswordErr: boolean;
  notMatchErr: boolean;
  password: any;
  fname: any;
  loginSubmit: boolean;
  resetError: boolean;
  resetMsg: any;
  loginDetails: any;
  error: boolean;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    public vs: ValidationService,
    public service: WebService,
    public subjectService: SubjectService,
    public location: Location
  ) {
    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
    this.error = false;
    this.passwordErr = false;
    this.newpasswordErr = false;
    this.confpasswordErr = false;
    this.notMatchErr = false;
    this.error_msg = this.vs.errorList[this.lang];
  }

  ngOnInit() {
  }

  processKeyUp(e: any, el: any) {
    el.value = '';
    console.log(e);
    if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
      e.target.value = e.key;
      el.focus();
    } else {
      if (e.keyCode !== 8) {
        e.target.value = '';
      }
    }
  }

  processBack (e: any, el: any) {
    if (e.keyCode === 8) {
      e.target.value = '';
      el.focus();
    }
  }

  saveClick() {

    this.loginSubmit = true;
    this.passwordErr = false;
    this.newpasswordErr = false;
    this.confpasswordErr = false;
    this.notMatchErr = false;
    this.resetError = false;
    this.error = false;
    const password = [];
    const newpassword = [];
    const confirm = [];

    password[0] = this.old1.nativeElement.value;
    password[1] = this.old2.nativeElement.value;
    password[2] = this.old3.nativeElement.value;
    password[3] = this.old4.nativeElement.value;
    password[4] = this.old5.nativeElement.value;
    password[5] = this.old6.nativeElement.value;

    newpassword[0] = this.new1.nativeElement.value;
    newpassword[1] = this.new2.nativeElement.value;
    newpassword[2] = this.new3.nativeElement.value;
    newpassword[3] = this.new4.nativeElement.value;
    newpassword[4] = this.new5.nativeElement.value;
    newpassword[5] = this.new6.nativeElement.value;


    confirm[0] = this.conf1.nativeElement.value;
    confirm[1] = this.conf2.nativeElement.value;
    confirm[2] = this.conf3.nativeElement.value;
    confirm[3] = this.conf4.nativeElement.value;
    confirm[4] = this.conf5.nativeElement.value;
    confirm[5] = this.conf6.nativeElement.value;


    const oldpass = password.join('');
    const newpass = newpassword.join('');
    const confirmpass = confirm.join('');

      if (oldpass === '') {
        this.passwordErr = true;
        this.error = true;
      } else {
        for (const i in password) {
          if (password[i] === '') {
            this.passwordErr = true;
            this.error = true;
          }
        }
      }

      if (newpass === '') {
        this.newpasswordErr = true;
        this.error = true;
      } else {
        for (const i in newpassword) {
          if (newpassword[i] === '') {
            this.newpasswordErr = true;
            this.error = true;
          }
        }
      }

      if (confirmpass === '') {
        this.confpasswordErr = true;
        this.error = true;
      } else {
        for (const i in confirm) {
          if (confirm[i] === '') {
            this.confpasswordErr = true;
            this.error = true;
          }
        }
      }

      console.log(this.error);



      if (this.error === false) {
        if (newpass !== confirmpass) {
          this.notMatchErr = true;
          this.error = true;
        }
      }

    this.fname = 'reset_pin';
    const post_data = {'user_id': this.loginDetails.user_id, 'password': oldpass, 'new_password': newpass};
      this.service.post_data(this.fname, post_data).subscribe(response => {
        console.log(response);
        if (response.code === 1) {
          const responseData = response.responseResult;
          this.reset();
        } else {
          this.resetError = true;
          this.resetMsg = this.vs.errorCode[this.lang][response.errorCode];
          console.log(this.resetMsg);
        }
      }, (error) => {
        this.resetError = true;
        this.resetMsg = this.vs.errorCode[this.lang]['ER08'];
        console.log(this.resetMsg);
    });
  }

  reset() {
    this.conf1.nativeElement.value = '';
    this.conf2.nativeElement.value = '';
    this.conf3.nativeElement.value = '';
    this.conf4.nativeElement.value = '';
    this.conf5.nativeElement.value = '';
    this.conf6.nativeElement.value = '';

    this.new1.nativeElement.value = '';
    this.new2.nativeElement.value = '';
    this.new3.nativeElement.value = '';
    this.new4.nativeElement.value = '';
    this.new5.nativeElement.value = '';
    this.new6.nativeElement.value = '';

    this.old1.nativeElement.value = '';
    this.old2.nativeElement.value = '';
    this.old3.nativeElement.value = '';
    this.old4.nativeElement.value = '';
    this.old5.nativeElement.value = '';
    this.old6.nativeElement.value = '';
  }

  cancelClick() {
    this.location.back();
  }

}