<template>
  <div class="has-text-centered">
    <vue-hcaptcha
      :sitekey="sitekey"
      @error="onError"
      @expired="onExpired"
      @rendered="onRendered"
      @verify="onVerify"
    />
  </div>
</template>

<script>
import VueHcaptcha from '@hcaptcha/vue-hcaptcha'

export default {
  components: { VueHcaptcha },
  props: { tokenPadre: { type: String, required: true, default: '' } },
  data() {
    return { token: '', widgetId: null, hcaptcha: null }
  },
  methods: {
    onError(error) {
      console.log(error)
    },
    onExpired() {
      this.token = ''
    },
    onRendered() {
      this.hcaptcha = window.hcaptcha
    },
    onVerify(token, eKey) {
      this.token = token
      this.widgetId = eKey
    },
  },
  watch: {
    token() {
      this.$emit('token', this.token)
    },
    tokenPadre() {
      if (!this.tokenPadre) this.hcaptcha.reset()
    },
  },
  beforeCreate() {
    this.sitekey = process.env.hcaptchakey
  },
}
</script>

<style scoped></style>
