let cachedImageData = [];
let isLoading = false;
const targetHeight = 200;
const spacing = 5;
const preloadThreshold = 800;


function appendRows(imageBatch) {
  const $container = $('#mediasContainer');
  const containerWidth = $container.width();
  let row = [];
  let rowWidth = 0;
  $.each(imageBatch, function (_, imgData) {
    const scaledWidth = targetHeight * imgData.ratio;
    row.push(imgData);
    rowWidth += scaledWidth + spacing;
    if (rowWidth >= containerWidth || imgData === imageBatch[imageBatch.length - 1]) {
      if (row.length === 1 && imgData === imageBatch[imageBatch.length - 1]) {
        row.pop();
        mediasQueryParams.offset -= 1;
        return false;
      }
      const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
      const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
      const $rowDiv = $('<div>').addClass('mediasRow');
      $.each(row, function (_, imgData) {
        const $img = $('<img>')
          .addClass('border-primary')
          .attr('src', `/storage/medias/thumb_${imgData.filename}`)
          .attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
          .attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
          .css({height: adjustedHeight + 'px',
                width: adjustedHeight * imgData.ratio + 'px',
                display: 'inline-block',
                cursor: 'pointer'});
        const $link = $('<a>')
          .attr('href', `/media/${imgData.filename}`)
          .append($img);
        $rowDiv.append($link);
      });
      $container.append($rowDiv);
      row = [];
      rowWidth = 0;
    }
  });
}

function relayoutAll() {
  const $container = $('#mediasContainer');
  const containerWidth = $container.width();
  $container.empty();
  let row = [];
  let rowWidth = 0;
  $.each(cachedImageData, function (_, imgData) {
    const scaledWidth = targetHeight * imgData.ratio;
    row.push(imgData);
    rowWidth += scaledWidth + spacing;
    if (rowWidth >= containerWidth || imgData === cachedImageData[cachedImageData.length - 1]) {
      if (row.length === 1 && imgData === cachedImageData[cachedImageData.length - 1]) {
        row.pop();
        mediasQueryParams.offset -= 1;
        return false;
      }
      const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
      const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
      const $rowDiv = $('<div>').addClass('mediasRow');
      $.each(row, function (_, imgData) {
        const $img = $('<img>')
            .addClass('border-primary')
            .attr('src', `/storage/medias/thumb_${imgData.filename}`)
            .attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
            .attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
            .css({ height: adjustedHeight + 'px',
                  width: adjustedHeight * imgData.ratio + 'px',
                  display: 'inline-block',
                  cursor: 'pointer' });
        const $link = $('<a>')
          .attr('href', `/media/${imgData.filename}`)
          .append($img);
        $rowDiv.append($link);
      });
      $container.append($rowDiv);
      row = [];
      rowWidth = 0;
    }
  });
}

let resizeTimeout;
$(window).on('resize', function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(relayoutAll, 150);
});

$(window).on('scroll', function () {
  const scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
  if (!isLoading && scrollBottom < preloadThreshold) {
    loadImages(
    ).then(imageBatch => {
      appendRows(imageBatch);
    });
  }
});

$(document).ready(function () {
  loadImages(
  ).then(imageBatch => {
      appendRows(imageBatch);
  });
  $('#popularityButton').on('click', function () {
    popularityButtonClicked($(this));
  });
  $('#filterButton').on('click', function () {
    filterButtonClicked($(this));
  });
  if (mediasQueryParams.order_by !== 'uid,desc') {
    toggleButtonClass($('#popularityButton'));
  }
  if (mediasQueryParams.hasOwnProperty('filter')) {
    toggleButtonClass($('#filterButton'));
  }
});