'use strict'

import $ from 'jquery'
import Events from '../lib/_events'

const NoCaptcha = (($) => {
  // Constants
  const $window = $(window)
  const D = document
  const $Body = $('body')

  const NAME = 'jsNoCaptcha'

  class NoCaptcha {
    static init () {
      const ui = this
      ui.dispose()

      console.log(`${NAME}: init`)

      if (
        $('.g-recaptcha').length &&
        typeof $window[0].grecaptcha === 'undefined'
      ) {
        console.log(`${NAME}: Loading Captcha API`)

        $.getScript(
          'https://www.google.com/recaptcha/api.js?render=explicit&hl=en&onload=noCaptchaFieldRender',
          () => {
            this.renderCaptcha()
          }
        )
      } else {
        this.renderCaptcha()
      }
    }

    static dispose () {
      console.log(`${NAME}: dispose`)
    }

    static renderCaptcha () {
      const grecaptcha = $window[0].grecaptcha
      if (
        typeof grecaptcha === 'undefined' ||
        typeof grecaptcha.render === 'undefined'
      ) {
        return
      }

      console.log(`${NAME}: Rendering Captcha`)
      const $_noCaptchaFields = $('.g-recaptcha')

      if (!$('.g-recaptcha').length) {
        console.log(`${NAME}: No Captcha fields`)
        return
      }

      const submitListener = (e) => {
        const $field = $(e.currentTarget).find('.g-recaptcha')
        grecaptcha.execute($field.data('widgetid'))
      }

      $_noCaptchaFields.each((i, field) => {
        const $field = $(field)

        if ($field.data('widgetid') || $field.html().length) {
          return
        }

        const $form = $field.data('form')
          ? $(`#${$field.data('form')}`)
          : $field.parents('form')

        const widget_id = grecaptcha.render(field, $field.data())
        $field.data('widgetid', widget_id)

        // For the invisible captcha we need to setup some callback listeners
        if ($field.data('size') === 'invisible' && !$field.data('callback')) {
          grecaptcha.execute(widget_id)
          $form.on('submit', submitListener)
        }
      })
    }
  }

  $window.on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
    NoCaptcha.init()
  })

  $window.data(`${NAME}`, NoCaptcha)
  $window[0].noCaptchaFieldRender = NoCaptcha.renderCaptcha

  return NoCaptcha
})($)

export default NoCaptcha