(function ($) {
  'use strict';

  var rowSelector = '.container-products';
  var hintClass = 'product-scroll-hint';
  var buttonClass = 'product-scroll-hint__button';
  var activeClass = 'product-scroll-hint--active';
  var ticking = false;

  if (!$) {
    return;
  }

  function hasNextScroll(row) {
    return row.scrollWidth - row.clientWidth - row.scrollLeft > 8;
  }

  function canScroll(row) {
    return row.scrollWidth > row.clientWidth + 8;
  }

  function updateRow(row) {
    var $row = $(row);
    var $hint = $row.parent('.' + hintClass);

    if (!$hint.length) {
      return;
    }

    var isActive = canScroll(row) && hasNextScroll(row);

    $hint.toggleClass(activeClass, isActive);
    $hint.children('.' + buttonClass)
      .prop('disabled', !isActive)
      .attr('aria-hidden', isActive ? 'false' : 'true');
  }

  function scrollRowToEnd(row) {
    var targetScrollLeft = row.scrollWidth - row.clientWidth;

    if (typeof row.scrollTo === 'function') {
      row.scrollTo({
        left: targetScrollLeft,
        behavior: 'smooth'
      });
      return;
    }

    $(row).stop().animate({ scrollLeft: targetScrollLeft }, 450);
  }

  function updateAllRows() {
    $(rowSelector).each(function () {
      updateRow(this);
    });
  }

  function requestUpdateAll() {
    if (ticking) {
      return;
    }

    ticking = true;
    window.requestAnimationFrame(function () {
      updateAllRows();
      ticking = false;
    });
  }

  function initRows() {
    $(rowSelector).each(function () {
      var $row = $(this);

      if (!$row.parent('.' + hintClass).length) {
        $row.wrap('<div class="' + hintClass + '"></div>');
      }

      var $hint = $row.parent('.' + hintClass);

      if (!$hint.children('.' + buttonClass).length) {
        $hint.append(
          '<button class="' + buttonClass + '" type="button" aria-label="Прокрутить товары вправо">' +
            '<span class="material-icons-outlined" aria-hidden="true">arrow_forward</span>' +
          '</button>'
        );
      }

      $row.off('scroll.productScrollHint').on('scroll.productScrollHint', function () {
        updateRow(this);
      });

      updateRow(this);
    });
  }

  $(function () {
    initRows();
    $(window).on('load resize orientationchange', requestUpdateAll);

    $(document).on('click', '.subcategory-filter', function () {
      window.setTimeout(requestUpdateAll, 280);
    });

    $(document).on('click', '.' + buttonClass, function () {
      var row = $(this).siblings(rowSelector).get(0);

      if (!row) {
        return;
      }

      scrollRowToEnd(row);
    });
  });
})(window.jQuery);