import { Component, AfterViewInit, Input, Output, OnChanges, EventEmitter } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

declare const grecaptcha;

@Component({
  selector: 'rd-captcha',
  template: `
    <div class="form-group">
      <div [id]="id" class="g-recaptcha" data-callback="captchaCallback" style="text-align: -webkit-center"></div>
    </div>
  `
})
export class Captcha extends RdComponent implements AfterViewInit, OnChanges {
  constructor() {
    super();
    this.id = "captcha_element" + Math.random();
  }

  @Input("reset") reset = false;
  @Output("resetChange") resetChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output("response-token") captchaResponse: EventEmitter<string> = new EventEmitter<string>();

  id;
  widgetID;

  ngOnChanges(changes) {
    if (changes.reset && changes.reset.currentValue) this.resetCaptcha();
  }

  ngAfterViewInit() {
    this.widgetID = grecaptcha.render(this.id, {
      'sitekey': "6LcUUVkaAAAAAI0PEZjW73M_-CAMFXGLUlQtsZ-g",
      'callback': function (token) {
        this.captchaResponse.emit(token);
      }.bind(this)
    });
  }

  resetCaptcha() {
    grecaptcha.reset(this.widgetID);
    this.resetChange.emit(false);
  }
}