import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { SignupService } from './../../services';
import { ResourceService, ServerResponse } from '@sunbird/shared';
import { Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import * as _ from 'lodash-es';
import {
  IStartEventInput, IEndEventInput, IInteractEventInput,
  IInteractEventObject, IInteractEventEdata
} from '@sunbird/telemetry';
import { DeviceDetectorService } from 'ngx-device-detector';
import { TelemetryService } from '@sunbird/telemetry';

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

  @Input() signUpdata: any;
  @Input() tncLatestVersion: any;
  @Output() redirectToParent = new EventEmitter();
  otpForm: UntypedFormGroup;
  disableSubmitBtn = true;
  mode: string;
  errorMessage: string;
  infoMessage: string;
  unabletoVerifyErrorMessage: string;
  disableResendButton = false;
  showSignUpLink = false;

  telemetryEnd: IEndEventInput;
  submitOtpInteractEdata: IInteractEventEdata;
  submitResendOtpInteractEdata: IInteractEventEdata;
  generateOTPErrorInteractEdata: any;
  generateVerifyOtpErrorInteractEdata: any;
  createUserErrorInteractEdata: any;
  telemetryCdata: Array<{}>;
  instance: string;
  emailAddress: any;
  phoneNumber: any;
  constructor(public resourceService: ResourceService, public signupService: SignupService,
    public activatedRoute: ActivatedRoute, public telemetryService: TelemetryService,
    public deviceDetectorService: DeviceDetectorService) { }

  ngOnInit() {
    this.emailAddress = this.signUpdata.value.email;
    this.phoneNumber = this.signUpdata.value.phone;
    this.mode = this.signUpdata.controls.contactType.value;
    this.otpForm = new UntypedFormGroup({
      otp: new UntypedFormControl('', [Validators.required])
    });
    this.enableSignUpSubmitButton();
    this.unabletoVerifyErrorMessage = this.mode === 'phone' ? this.resourceService.frmelmnts.lbl.unableToVerifyPhone :
      this.resourceService.frmelmnts.lbl.unableToVerifyEmail;
    this.setInteractEvent();
    this.instance = _.upperCase(this.resourceService.instance);

  }

  verifyOTP() {
    const wrongOTPMessage = this.mode === 'phone' ? this.resourceService.frmelmnts.lbl.wrongPhoneOTP :
      this.resourceService.frmelmnts.lbl.wrongEmailOTP;
    this.disableSubmitBtn = true;
    const request = {
      'request': {
        'key': this.mode === 'phone' ? this.signUpdata.controls.phone.value.toString() :
          this.signUpdata.controls.email.value,
        'type': this.mode,
        'otp': this.otpForm.controls.otp.value
      }
    };
    this.signupService.verifyOTP(request).subscribe(
      (data: ServerResponse) => {
        this.infoMessage = '';
        this.errorMessage = '';
        this.createUser(data);
      },
      (err) => {
        this.logVerifyOtpError(err.error.params.errmsg);
        this.telemetryService.interact(this.generateVerifyOtpErrorInteractEdata);
        this.infoMessage = '';
        this.otpForm.controls.otp.setValue('');
        this.errorMessage = err.error.params.status === 'ERROR_INVALID_OTP' ?
          wrongOTPMessage : wrongOTPMessage;
        if (this.disableResendButton) {
          this.showSignUpLink = true;
          this.telemetryService.end(this.telemetryEnd);
        }
        this.disableSubmitBtn = false;
      }
    );
  }

  logVerifyOtpError(error) {
    this.generateVerifyOtpErrorInteractEdata = {
      context: {
        env: this.activatedRoute.snapshot.data.telemetry.env,
        cdata: this.telemetryCdata,
      },
      edata: {
        id: 'invalid-otp-error',
        type: 'click',
        pageid: 'otp',
        extra: {
          'isError': 'true'
        }
      }
    };
  }

  createUser(data?: any) {
    let identifier = '';
    const createRequest = {
      params: {
        source: _.get(this.activatedRoute, 'snapshot.queryParams.client_id'),
        signupType: 'self'
      },
      'request': {
        'firstName': _.trim(this.signUpdata.controls.name.value),
        'password': _.trim(this.signUpdata.controls.password.value),
      }
    };
    if (this.mode === 'phone') {
      createRequest.request['phone'] = this.signUpdata.controls.phone.value.toString();
      createRequest.request['phoneVerified'] = true;
      identifier = this.signUpdata.controls.phone.value.toString();
    } else {
      createRequest.request['email'] = this.signUpdata.controls.email.value;
      createRequest.request['emailVerified'] = true;
      identifier = this.signUpdata.controls.email.value;
    }
    createRequest.request['reqData'] = _.get(data, 'reqData');
    if (this.signUpdata.controls.tncAccepted.value && this.signUpdata.controls.tncAccepted.status === 'VALID') {
      this.signupService.createUserV3(createRequest).subscribe((resp: ServerResponse) => {
          this.telemetryLogEvents('sign-up', true);
          const tncAcceptRequestBody = {
            request: {
              version: this.tncLatestVersion,
              identifier: identifier
            }
          };
          this.signupService.acceptTermsAndConditions(tncAcceptRequestBody).subscribe(res => {
            this.telemetryLogEvents('accept-tnc', true);
            this.redirectToSignPage();
          }, (err) => {
            this.telemetryLogEvents('accept-tnc', false);
            this.redirectToSignPage();
          });
        },
        (err) => {
          this.telemetryLogEvents('sign-up', false);
          this.infoMessage = '';
          this.errorMessage = this.resourceService.messages.fmsg.m0085;
          this.disableSubmitBtn = false;
          this.logCreateUserError(err.error.params.errmsg);
          this.telemetryService.interact(this.createUserErrorInteractEdata);
        }
      );
    }
  }

  /**
   * Redirects to sign in Page with success message
   */
  redirectToSignPage() {
    const reqQuery = this.activatedRoute.snapshot.queryParams;
    const queryObj = _.pick(reqQuery,
      ['client_id', 'redirect_uri', 'scope', 'state', 'response_type', 'version']);
    queryObj['success_message'] = this.mode === 'phone' ? this.resourceService.frmelmnts.lbl.createUserSuccessWithPhone :
      this.resourceService.frmelmnts.lbl.createUserSuccessWithEmail;
    const query = Object.keys(queryObj).map((key) => {
      return encodeURIComponent(key) + '=' + encodeURIComponent(queryObj[key]);
    }).join('&');
    const redirect_uri = reqQuery.error_callback + '?' + query;
    this.telemetryService.end(this.telemetryEnd);
    window.location.href = redirect_uri;
  }

  logCreateUserError(error) {
    this.createUserErrorInteractEdata = {
      context: {
        env: this.activatedRoute.snapshot.data.telemetry.env,
        cdata: this.telemetryCdata,
      },
      edata: {
        id: 'create-user-error',
        type: 'click',
        pageid: 'otp',
        extra: {
          'isError': 'true'
        }
      }
    };
  }

  resendOTP() {
    const request = {
      'request': {
        'key': this.signUpdata.controls.contactType.value === 'phone' ?
          this.signUpdata.controls.phone.value.toString() : this.signUpdata.controls.email.value,
        'type': this.mode
      }
    };
    this.signupService.generateOTP(request).subscribe(
      (data: ServerResponse) => {
        this.errorMessage = '';
        this.infoMessage = this.resourceService.frmelmnts.lbl.resentOTP;
      },
      (err) => {
        this.infoMessage = '';
        this.errorMessage = this.resourceService.messages.fmsg.m0085;
        this.logGenerateOtpError(err.error.params.errmsg);
        this.telemetryService.interact(this.generateOTPErrorInteractEdata);
      }
    );
  }

  logGenerateOtpError(error) {
    this.generateOTPErrorInteractEdata = {
      context: {
        env: this.activatedRoute.snapshot.data.telemetry.env,
        cdata: this.telemetryCdata,
      },
      edata: {
        id: 'resend-otp-error',
        type: 'click',
        pageid: 'otp',
        extra: {
          'isError': 'true'
        }
      }
    };
  }

  enableSignUpSubmitButton() {
    this.otpForm.valueChanges.subscribe(val => {
      if (this.otpForm.status === 'VALID') {
        this.disableSubmitBtn = false;
      } else {
        this.disableSubmitBtn = true;
      }
    });
  }

  redirectToSignUp() {
    this.redirectToParent.emit('true');
  }

  setInteractEvent() {
    this.telemetryCdata = [{ 'type': 'otp', 'id': this.activatedRoute.snapshot.data.telemetry.uuid }];

    this.submitOtpInteractEdata = {
      id: 'submit-otp',
      type: 'click',
      pageid: 'otp',
      extra: {
        'values': '/sign-up'
      }
    };

    this.submitResendOtpInteractEdata = {
      id: 'resend-otp',
      type: 'click',
      pageid: 'otp'
    };

    this.telemetryEnd = {
      context: {
        env: this.activatedRoute.snapshot.data.telemetry.env,
        cdata: this.telemetryCdata,
      },
      edata: {
        type: 'signup',
        pageid: 'signup',
        mode: 'self'
      }
    };
  }

  telemetryLogEvents(api: any, status: boolean) {
    let level = 'ERROR';
    let msg = api + ' failed';
    if (status) {
      level = 'SUCCESS';
      msg = api + ' success';
    }
    const event = {
      context: {
        env: 'self-signup'
      },
      edata: {
        type: api,
        level: level,
        message: msg
      }
    };
    this.telemetryService.log(event);
  }
}