/**
 * Matreshka checkout phone input.
 * Keeps the billing phone in the required +7 XXX XXX XX XX format.
 */
(function ($) {
  'use strict';

  var PHONE_PATTERN = /^\+7 \d{3} \d{3} \d{2} \d{2}$/;
  var INVALID_MESSAGE = 'Введите номер телефона в формате +7 XXX XXX XX XX.';

  function getSubscriberDigits(value) {
    var digits = String(value || '').replace(/\D/g, '');

    // The field always displays the +7 prefix. Remove it from pasted and
    // manually entered values before limiting the ten subscriber digits.
    if (digits.charAt(0) === '7') {
      digits = digits.slice(1);
    }

    return digits.slice(0, 10);
  }

  function formatPhone(value) {
    var digits = getSubscriberDigits(value);
    var formatted = '+7';

    if (digits.length) {
      formatted += ' ' + digits.slice(0, 3);
    }
    if (digits.length > 3) {
      formatted += ' ' + digits.slice(3, 6);
    }
    if (digits.length > 6) {
      formatted += ' ' + digits.slice(6, 8);
    }
    if (digits.length > 8) {
      formatted += ' ' + digits.slice(8, 10);
    }

    return formatted;
  }

  function updateValidity(input) {
    var isPhoneValid = PHONE_PATTERN.test(input.value);

    input.setCustomValidity(isPhoneValid ? '' : INVALID_MESSAGE);
    input.setAttribute('aria-invalid', isPhoneValid ? 'false' : 'true');
    $(input).closest('.checkout-input').toggleClass('phone-invalid', !isPhoneValid);
  }

  function updatePlaceOrderState() {
    var input = getPhoneInput();
    var isPhoneValid = input && PHONE_PATTERN.test(input.value);
    var $button = $('#place_order');

    $button
      .prop('disabled', !isPhoneValid)
      .attr('aria-disabled', isPhoneValid ? 'false' : 'true')
      .toggleClass('disabled', !isPhoneValid);
  }

  function preparePhoneInput(input) {
    if (input.value) {
      input.value = formatPhone(input.value);
    }
    updateValidity(input);
    updatePlaceOrderState();
  }

  function getPhoneInput() {
    return document.getElementById('billing_phone');
  }

  $(function () {
    var phoneInput = getPhoneInput();
    if (phoneInput) {
      preparePhoneInput(phoneInput);
    }

    $(document).on('focus', '#billing_phone', function () {
      if (!this.value) {
        this.value = '+7';
      }
      updateValidity(this);
      updatePlaceOrderState();
    });

    $(document).on('input', '#billing_phone', function () {
      this.value = formatPhone(this.value);
      updateValidity(this);
      updatePlaceOrderState();
    });

    // The review block may be replaced after WooCommerce updates checkout.
    $(document.body).on('updated_checkout', function () {
      var updatedPhoneInput = getPhoneInput();
      if (updatedPhoneInput) {
        preparePhoneInput(updatedPhoneInput);
      }
    });

    $('form.checkout').on('checkout_place_order', function () {
      var input = getPhoneInput();
      if (!input) {
        return true;
      }

      input.value = formatPhone(input.value);
      updateValidity(input);
      updatePlaceOrderState();

      if (!input.checkValidity()) {
        input.reportValidity();
        return false;
      }

      return true;
    });
  });
})(jQuery);