/**
 * "Показать ещё" для блока "Команда" (blocks/team.php) — ТОЛЬКО для
 * планшета/десктопа (>=768px), где это обычная CSS grid-сетка.
 *
 * На мобилке (<768px) активен Swiper (см. config/sliders.js,
 * conditionActive: innerWidth < 768) — там показаны ВСЕ карточки сразу,
 * этот модуль там ничего не делает (кнопки нет, см. CSS).
 *
 * Начальное состояние (сколько карточек видно) задаёт CSS через
 * nth-child (6 на планшете 768-1199px, 8 от 1200px) — так же, как в
 * блоке "Форматы" (formats-load-more.js). Этот модуль только досвечивает
 * следующие партии по 4 карточки за клик.
 */

const TABLET_BREAKPOINT = 768;
const DESKTOP_BREAKPOINT = 1200;
const TABLET_INITIAL = 6;
const DESKTOP_INITIAL = 8;
const STEP = 4;

function getInitialCount() {
   return window.innerWidth >= DESKTOP_BREAKPOINT ? DESKTOP_INITIAL : TABLET_INITIAL;
}

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

   if (!list || !button) return;

   const items = Array.from(list.querySelectorAll(".team-slider__slide"));
   let shownCount = getInitialCount();
   let lastBreakpointKey = window.innerWidth >= DESKTOP_BREAKPOINT ? "desktop" : "tablet";

   function render() {
      items.forEach((item, index) => {
         // Явно "block" (не ""), иначе не перебьёт CSS-правило
         // :nth-child(n+7)/:nth-child(n+9) { display: none; } —
         // пустая строка просто снимает инлайн-стиль и возвращает
         // карточку под действие этого правила.
         item.style.display = index < shownCount ? "block" : "none";
      });
      button.style.display = shownCount >= items.length ? "none" : "";
   }

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

   function handleResize() {
      if (window.innerWidth < TABLET_BREAKPOINT) {
         // Мобилка — тут рулит Swiper, наши инлайн-стили сбрасываем,
         // чтобы не мешать слайдам (Swiper сам управляет display/transform).
         items.forEach((item) => {
            item.style.display = "";
         });
         return;
      }

      const breakpointKey = window.innerWidth >= DESKTOP_BREAKPOINT ? "desktop" : "tablet";
      if (breakpointKey !== lastBreakpointKey) {
         lastBreakpointKey = breakpointKey;
         shownCount = getInitialCount();
         render();
      }
   }

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

   if (window.innerWidth >= TABLET_BREAKPOINT) {
      render();
   }
}

export default function initTeamLoadMore() {
   document.querySelectorAll(".js-team-block").forEach(createTeamLoadMore);
}
