/**
 * "Показать ещё" для блока "Форматы мероприятий" (blocks/formats.php).
 *
 * Начальное состояние карточек задаётся в CSS через nth-child
 * (frontend/src/scss/sections/formats.scss: мобилка — 6 карточек,
 * от _Desktop т.е. 1200px — 8), это исключает "прыжок" контента при
 * загрузке страницы. Этот модуль только ДОСВЕЧИВАЕТ следующие партии
 * карточек по клику и пересчитывает партию при переходе через
 * брейкпоинт 1200px (ресайз/поворот экрана).
 */

const DESKTOP_BREAKPOINT = 1200;
const MOBILE_STEP = 6;
const DESKTOP_STEP = 8;

function getStep() {
   return window.innerWidth >= DESKTOP_BREAKPOINT ? DESKTOP_STEP : MOBILE_STEP;
}

function createFormatsLoadMore(block) {
   const list = block.querySelector(".js-formats-list");
   const button = block.querySelector(".js-formats-more");

   if (!list || !button) return;

   const items = Array.from(list.querySelectorAll(".js-formats-item"));
   let shownCount = getStep();
   let isDesktop = window.innerWidth >= DESKTOP_BREAKPOINT;

   function render() {
      items.forEach((item, index) => {
         item.style.display = index < shownCount ? "block" : "none";
      });
      button.style.display = shownCount >= items.length ? "none" : "flex";
   }

   function showMore() {
      shownCount += getStep();
      render();
   }

   function handleResize() {
      const nowDesktop = window.innerWidth >= DESKTOP_BREAKPOINT;
      if (nowDesktop !== isDesktop) {
         isDesktop = nowDesktop;
         shownCount = getStep();
         render();
      }
   }

   button.addEventListener("click", showMore);
   window.addEventListener("resize", handleResize);

   render();
}

export default function initFormatsLoadMore() {
   const blocks = document.querySelectorAll(".js-formats-block");
   blocks.forEach(createFormatsLoadMore);
}
