"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;