import { Controller } from 'stimulus';
const helper = require("./../components/helper.js");
const loader = require("./../components/loader.js");

export default class extends Controller {
    connect() {
      const btn = this.element;

      if (window.smartCaptcha) {
        const container = document.getElementById('smart-captcha');
        const widgetId = window.smartCaptcha.render(container, {
          sitekey: 'ysc1_EaQp6z8UPPQAIfHLm8mlrfFGee54huOrUEgGWgRpcf5c2225',
          hl: 'ru',
        });
        
        container.dataset.id = widgetId;

        window.smartCaptcha.subscribe( widgetId, 'success', function () {
          btn.disabled = false;
        });
      }

      if (btn && btn?.type === 'submit') {
        btn.disabled = true;
        btn.addEventListener('click', function(evn) {
          evn.preventDefault();
          loader.btnLoader(btn, true);

          if ($('#' + btn.dataset.formId)[0].checkValidity()) {
            helper.sendRequest({'smart-token' : window.smartCaptcha.getResponse()}, '/api/smart-captcha').then(function (response) {
              if (response.status != 'ok') {
                loader.btnLoader(btn, false);
                window.smartCaptcha.reset();
              } else {
                $('#' + btn.dataset.formId).submit();
              }
            });
          } else {
            window.smartCaptcha.reset();
            $('#' + btn.dataset.formId)[0].reportValidity();
            loader.btnLoader(btn, false);
          }
        });
      }
    }

    addYandexMetrica() {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.innerHTML = `
            (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
            m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
            (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
        `;

        document.head.appendChild(script);
    }

    setYm() {
      const ymNum = document.getElementsByName('ymNum')[0]?.value;
      const ymId = document.getElementsByName('ymId')[0]?.value;

      if (ymNum && ymId) {
        this.addYandexMetrica();

        window.ym(ymNum,'reachGoal', ymId);
      }
    }
}