import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { WebService } from './../../providers/web.service';
import { ValidationService } from './../../providers/validation.service';
import { FormControl, FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-forgot',
  templateUrl: './forgot.component.html',
  styleUrls: ['./forgot.component.scss']
})
export class ForgotComponent implements OnInit {

  forgotForm: FormGroup;
  mobnumPattern = '^((\\+?)|0)?[0-9]{9,11}$';
  forgotSubmit: boolean;
  lang =  'en';
  error_msg: any[];
  funcName: any;
  loader: boolean;
  responseError: any;
  error: boolean;
  success: boolean;
  otpErr: boolean;
  otpError: boolean;
  forgotMsg: any;
  @ViewChild('focus1') focus1: ElementRef;
  @ViewChild('focus2') focus2: ElementRef;
  @ViewChild('focus3') focus3: ElementRef;
  @ViewChild('focus4') focus4: ElementRef;
  @ViewChild('focus5') focus5: ElementRef;
  @ViewChild('focus6') focus6: ElementRef;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    public vs: ValidationService,
    public service: WebService,
    private formBuilder: FormBuilder
    ) {
      this.otpErr = false;
      this.otpError = false;
      this.error_msg = this.vs.errorList[this.lang];
    }

  ngOnInit() {
    this.forgotForm = this.formBuilder.group({
      // tslint:disable-next-line:max-line-length
      'phone':  ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
    });
  }

  goToPage(path: any, data = null){
    console.log(data);
    this.router.navigateByUrl(path, {queryParams:data});
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }

  reqOtp() {
    const This = this;
    this.error = false;
    this.success = false;
    this.forgotSubmit = true;
    if (this.forgotForm.valid) {
      this.loader = true;
      const providerObj = this.forgotForm.value;
      this.funcName = 'send_otp';
      this.service.post_data(this.funcName, providerObj).subscribe(response => {
        this.loader = false;
        console.log(response);
        if (response.code === 1) {
          this.success = true;
          this.forgotSubmit = false;
          this.reset();
        } else {
          this.error = true;
          this.responseError = this.vs.errorCode[this.lang][response.errorCode];
        }
      }, (error) => {
        this.error = false;
        this.responseError = this.vs.errorCode[this.lang]['ER08'];
      });
    }
    console.log('tested');
  }
  

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

  reset() {
    if (this.focus1) {
      this.focus1.nativeElement.value = '';
      this.focus2.nativeElement.value = '';
      this.focus3.nativeElement.value = '';
      this.focus4.nativeElement.value = '';
      this.focus5.nativeElement.value = '';
      this.focus6.nativeElement.value = '';
    }
  }



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

  verifyOtp() {
    const password = [];
    password[0] = this.focus1.nativeElement.value;
    password[1] = this.focus2.nativeElement.value;
    password[2] = this.focus3.nativeElement.value;
    password[3] = this.focus4.nativeElement.value;
    password[4] = this.focus5.nativeElement.value;
    password[5] = this.focus6.nativeElement.value;

    const pass = password.join('');
    const phone = this.forgotForm.value['phone'];

    if (phone === '') {
      if (pass === '') {
        this.otpErr = true;
      }
      return false;
    }
    for (const i in password) {
      if (password[i] === '') {
        this.otpErr = true;
        return false;
      }
    }

    this.loader = true;

    this.funcName = 'otp_verify';
    const post_data = {'phone': phone, 'otp': pass};
      this.service.post_data(this.funcName, post_data).subscribe(response => {
        this.loader = false;
        console.log(response);
        if (response.code === 1) {
          const responseData = response.responseResult;
          this.router.navigate(['start/newpin/' + responseData.user_id]);
        } else {
          this.error = true;
          this.responseError = this.vs.errorCode[this.lang][response.errorCode];
        }
      }, (error) => {
        this.error = true;
        this.responseError = this.vs.errorCode[this.lang]['ER08'];
    });
  }

}
