var Wick = Wick || {};
Wick.CheckoutPaymentDetails = (function() {
  const $modal = $('#modal-terms-and-conditions');

  const elements = {
    $wrapperPaymentInput: $('.checkout-payment-details__row'),
    paymentInputName: '[name=payment-method]',
    $cardDetails: $('.checkout-payment-details__card-details'),
    $placeOrder: $('.checkout-payment-details__place-order'),
    hiddenCardDetailsClass: 'checkout-payment-details__card-details_hidden',
    hiddenClass: 'd-none',
  }

  function preparePage() {
    var modalOpened = $(".modal.show").length;
    if (!modalOpened) {
      return;
    }
    var modalContent = $modal.find('.modal-content').clone();
    $modal.modal("hide");
    modalContent.addClass("print-area");
    $("body")
      .addClass("print-mode")
      .append(modalContent);
  }

  function resetPage() {
    var modalPrintModeActive = $("body.print-mode").length;
    if (!modalPrintModeActive) {
      return;
    }
    $("body").removeClass("print-mode");
    $(".print-area").remove();
    $modal.modal("show");
  }

  function getPaymentMethods() {
    return $(elements.paymentInputName)
      .map((_, item) => $(item).val())
      .get()
  }

  function togglePaymentBlocks(paymentMethods, checkedMethod) {
    paymentMethods.forEach(method => {
      $(`[data-${method}]`).toggle(checkedMethod === method)
    })
  }

  function changeDetailsBlock(checkedMethod) {
    switch(checkedMethod) {
      case 'paypal':
        hideCardDetails();
        showPlaceOrder();
        break;
      case 'klarna':
      case 'apple':
        hideCardDetails()
        hidePlaceOrder()
        break;
      case 'google':
        hideCardDetails()
        hidePlaceOrder()
        break;
      default:
        showPlaceOrder()
    }
  }

  function hideCardDetails() {
    elements.$cardDetails.addClass(elements.hiddenCardDetailsClass);
  }

  function showPlaceOrder() {
    elements.$placeOrder.removeClass(elements.hiddenClass);
  }

  function hidePlaceOrder() {
    elements.$placeOrder.addClass(elements.hiddenClass);
  }

  function init() {
    const paymentMethods = getPaymentMethods();

    elements.$wrapperPaymentInput.on('change', elements.paymentInputName, function() {
      const checkedMethod = $(this).val();

      togglePaymentBlocks(paymentMethods, checkedMethod)
      changeDetailsBlock(checkedMethod)
    });

    $('.btn-new-card').on('click', function() {
      $('[data-new-card]').show();
      $('[data-existing-card]').hide();
      return false;
    });

    $('.btn-back-to-existing-card').on('click', function() {
      $('[data-new-card]').hide();
      $('[data-existing-card]').show();
      return false;
    });

    // do not subscribe if no T&C modal on a current page
    if (!$modal.length) {
      return;
    }

    if (typeof(window.onbeforeprint) !== 'undefined') {
      // subscriptions for browsers
      window.onbeforeprint = preparePage;
      window.onafterprint = resetPage;
    } else if (window.matchMedia) {
      // subscriptions for iOS devices
      var mediaQueryList = window.matchMedia('print');
      mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
          preparePage();
        } else {
          resetPage();
        }
      });
    }
  }

  init();
})();
