<template>
  <n-input
    :rules="rules"
    :value="value"
    :label="label"
    :required="required"
    :helper-text="helperText"
  >
    <vue-recaptcha
      :ref="ref"
      :sitekey="sitekey"
      :language="language"
      :load-recaptcha-script="true"
      @verify="onChange"
      @expired="onChange"
    />
  </n-input>
</template>

<script>
import VueRecaptcha from "vue-recaptcha";
import NInput from "../NInput/n-input.vue";

const Recaptcha = {
  name: "NRecaptcha",
  components: {
    NInput,
    VueRecaptcha,
  },
  data() {
    return {
      ref: "nRecaptcha",
    };
  },
  props: {
    sitekey: String,
    language: {
      type: String,
      default: "ar-sa",
    },
    rules: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    helperText: {
      type: String,
      default: "",
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    reset() {
      this.$refs[this.ref].reset();
      this.onChange();
    },
    onChange(token = "") {
      this.$emit("input", token);
      this.$emit("change", token);
    },
  },
};
export default Recaptcha;
</script>
