class Form {
  constructor({
    scope,
    target
  }) {
    this.$scope = scope;
    this.$target = target;

    if (this.$scope.length) {
      this.set();
      this.run();
    }
  }

  set() {
    this.input = '.input-float__input';
    this.inputClassNotEmpty = 'input-float__input_not-empty';
    this.inputClassFocused = 'input-float__input_focused';
    this.$inputs = this.$scope.find(this.input);
  }

  run() {
    this._floatLabels();
    this._bindEvents();

    if (typeof window.theme !== 'undefined' && window.theme.contactForm7.customModals) {
      if ($('.wpcf7-form').length) {
        window.kinsey.components.AssetsManager.loadBootstrapModal().then(() => this._attachModalsEvents());
      }
    }
  }

  _floatLabels() {
    const self = this;

    if (!this.$inputs || !this.$inputs.length) {
      return false;
    }

    this.$inputs.each(function () {
      const
        $el = $(this),
        $controlWrap = $el.parent('.wpcf7-form-control-wrap');

      // not empty value
      if ($el.val()) {
        $el.addClass(self.inputClassNotEmpty);
        $controlWrap.addClass(self.inputClassNotEmpty);
        // empty value
      } else {
        $el.removeClass([self.inputClassFocused, self.inputClassNotEmpty]);
        $controlWrap.removeClass([self.inputClassFocused, self.inputClassNotEmpty]);
      }

      // has placeholder & empty value
      if ($el.attr('placeholder') && !$el.val()) {
        $el.addClass(self.inputClassNotEmpty);
        $controlWrap.addClass(self.inputClassNotEmpty);
      }
    });

  }

  _bindEvents() {
    const self = this;

    this.$scope
      .off('focusin')
      .on('focusin', self.input, function () {
        const
          $el = $(this),
          $controlWrap = $el.parent('.wpcf7-form-control-wrap');

        $el.addClass(self.inputClassFocused).removeClass(self.inputClassNotEmpty);
        $controlWrap.addClass(self.inputClassFocused).removeClass(self.inputClassNotEmpty);

      })
      .off('focusout')
      .on('focusout', self.input, function () {

        const
          $el = $(this),
          $controlWrap = $el.parent('.wpcf7-form-control-wrap');

        // not empty value
        if ($el.val()) {
          $el.removeClass(self.inputClassFocused).addClass(self.inputClassNotEmpty);
          $controlWrap.removeClass(self.inputClassFocused).addClass(self.inputClassNotEmpty);
        } else {
          // has placeholder & empty value
          if ($el.attr('placeholder')) {
            $el.addClass(self.inputClassNotEmpty);
            $controlWrap.addClass(self.inputClassNotEmpty);
          }

          $el.removeClass(self.inputClassFocused);
          $controlWrap.removeClass(self.inputClassFocused);
        }

      });

  }

  _attachModalsEvents() {
    window.$document
      .off('wpcf7submit')
      .on('wpcf7beforesubmit', (e) => {
        const
          $form = $(e.target),
          $submit = $form.find('[type="submit"]');

        $form.addClass('pointer-events-none');
        window.$body.addClass('cursor-progress');


        if ($submit.length) {
          const
            $title = $submit.find('.button__label-hover .button__title'),
            $icons = $submit.find('.button__icon');

          $title.data('original-title', $title.text());

          $submit.addClass('button_hovered');
          $title.html('<svg class="spinner spinner_small" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="spinner__path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>');

          if ($icons.length) {
            gsap.set($icons, {
              autoAlpha: 0
            });
          }
        }

        // Set loading cursor follower
        if (window.$cursor && window.$cursor.length) {
          window.$cursor.trigger('startLoading');
        }
      })
      .on('wpcf7submit', (e) => {

        const
          $modal = $('#modalContactForm7'),
          $form = $(e.target),
          $submit = $form.find('[type="submit"]');
        let template;

        $modal.modal('dispose').remove();

        if (e.detail.apiResponse.status === 'mail_sent') {

          template = this._getModalTemplate({
            icon: 'icon-success.svg',
            message: e.detail.apiResponse.message,
          });

          this._createModal({
            template,
            onDismiss: () => {
              $(e.target).find(this.input).parent().val('').removeClass(this.inputClassFocused).removeClass(this.inputClassNotEmpty);
            }
          });
        }

        if (e.detail.apiResponse.status === 'mail_failed') {
          template = this._getModalTemplate({
            icon: 'icon-error.svg',
            message: e.detail.apiResponse.message
          });

          this._createModal({
            template
          });
        }

        $form.removeClass('pointer-events-none');
        window.$body.removeClass('cursor-progress');

        // Hide loading cursor follower
        if (window.$cursor && window.$cursor.length) {
          window.$cursor.trigger('finishLoading');
        }

        if ($submit.length) {
          const
            $title = $submit.find('.button__label-hover .button__title'),
            originalTitle = $title.data('original-title'),
            $icons = $submit.find('.button__icon');

          $submit.removeClass('button_hovered');

          if ($title.length && originalTitle) {
            $title.text(originalTitle);
          }

          if ($icons.length) {
            gsap.set($icons, {
              clearProps: 'opacity,visibility'
            });
          }
        }

      });
  }

  _getModalTemplate({
    icon,
    message
  }) {
    return `
      <div class="modal fade" id="modalContactForm">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content radius-img">
            <div class="modal__close" data-dismiss="modal"><img src="${window.theme.themeURL}/img/modal/icon-close.svg"/></div>
              <header class="text-center mb-1">
                <img src="${window.theme.themeURL}/img/modal/${icon}" width="80px" height="80px" alt=""/>
                <p class="modal__message h4"><strong>${message}</strong></p>
              </header>
              <button type="button" class="button button_solid bg-dark-1 button_fullwidth" data-dismiss="modal"><span class="button__label button__label-normal"><span class="button__title">OK</span></span><span class="button__label button__label-hover"><span class="button__title">OK</span></span>
              </button>
          </div>
        </div>
      </div>
    `;
  }

  _createModal({
    template,
    onDismiss
  }) {

    if (!template) {
      return false;
    }

    let $modal;
    window.$body.append(template);
    $modal = $('#modalContactForm');

    $modal.modal('show');
    $modal.on('hidden.bs.modal', () => {
      if (typeof onDismiss === 'function') {
        onDismiss();
      }
      $modal.modal('dispose').remove();
    });
  }
}