"use strict";

const pageLang = document.documentElement.lang;
const itemsToFilter = document.querySelectorAll('[filter-item]');
const categoriesToFilter = document.querySelectorAll('[filter-category]');
const mobileFilters = document.querySelectorAll('[mobile-filter]');
const desktopFilters = document.querySelectorAll('[desktop-filter');
const searchFilter = document.querySelector('[search-filter]');
const filters = {
  year: '',
  category: '',
  search: ''
};
const updateFilters = (prop, value) => {
  filters[prop] = value;
  filterItems();
  if (!moreButton.button) return;
  moreButton.updateItems = [...itemsToFilter].filter(item => !item.hidden);
  moreButton.rebuild();
};
const getName = element => {
  const nameItem = element.querySelector('[data-name]');
  if (!nameItem) return '';
  return nameItem.innerHTML.toLocaleLowerCase(pageLang);
};
const isFiltered = element => {
  const searchedName = filters.search.toLowerCase(pageLang);
  const year = element.getAttribute('data-year');
  const name = getName(element);
  const isYearFiltered = year === filters.year || filters.year === '';
  const isNameFiltered = name.includes(searchedName) || filters.search === '';
  return isYearFiltered && isNameFiltered;
};
const toggleAfter = () => {
  itemsToFilter.forEach(item => item.classList.remove('-hidden-after'));
  const filteredData = document.querySelectorAll('[filter-item]:not([hidden])');
  filteredData.forEach((item, index) => {
    if (index % 3 == 2) {
      item.classList.add('-hidden-after');
    }
  });
};
const filterCategory = () => {
  categoriesToFilter.forEach(category => {
    const name = category.getAttribute('data-name');
    const itemsToFilter = [...category.querySelectorAll('[filter-item]')];
    const isFiltered = name === filters.category || filters.category === '';
    category.toggleAttribute(hiddenAttr, !isFiltered);
    const activeItems = itemsToFilter.filter(item => !item.hidden);
    const itemsCount = activeItems.length;
    if (!itemsCount) category.hidden = true;
  });
};
const filterItems = () => {
  itemsToFilter.forEach(item => {
    const toFiltered = isFiltered(item);
    item.toggleAttribute(hiddenAttr, !toFiltered);
  });
  filterCategory();
  toggleAfter();
};
if (searchFilter) {
  searchFilter.addEventListener('keyup', () => {
    updateFilters('search', searchFilter.value);
    toggleAfter();
  });
}
"use strict";

const moreButton = {
  get cards() {
    return [...moreButton.items];
  },
  set updateItems(items) {
    moreButton.items = items;
  },
  button: document.querySelector('[more-button]'),
  items: document.querySelectorAll('[filter-item]'),
  showCardPerView: 9,
  showCard: card => card.hidden = false,
  hideCard: card => card.hidden = true,
  hasHiddenCard: () => moreButton.cards.some(item => item.hidden),
  hiddenCards: () => moreButton.cards.filter(item => item.hidden),
  toggleButton: () => {
    moreButton.button.toggleAttribute(hiddenAttr, !moreButton.hasHiddenCard());
  },
  showCards: () => {
    const showableCards = moreButton.hiddenCards();
    const cardsToShow = showableCards.slice(0, moreButton.showCardPerView);
    cardsToShow.forEach(moreButton.showCard);
    moreButton.toggleButton();
  },
  resetViewCards: () => {
    const cardToHide = moreButton.cards.slice(moreButton.showCardPerView);
    cardToHide.forEach(moreButton.hideCard);
  },
  resetCards: () => {
    moreButton.cards.forEach(moreButton.showCard);
  },
  init: () => {
    moreButton.button.addEventListener('click', moreButton.showCards);
  },
  destroy: () => {
    moreButton.button.removeEventListener('click', moreButton.showCards);
    moreButton.resetCards();
  },
  rebuild: () => {
    moreButton.destroy();
    moreButton.resetViewCards();
    moreButton.toggleButton();
    moreButton.init();
  }
};
if (moreButton.button) window.addEventListener('load', moreButton.init);
"use strict";

const desktopSelects = document.querySelectorAll('[desktop-filter]');
const mobileSelects = document.querySelectorAll('[mobile-filter]');
const outsideClick = e => {
  desktopSelects.forEach(select => {
    if (select == e.target || select.contains(e.target)) return;
    select.classList.remove('-expand');
  });
};
const updateOptions = (select, value) => {
  const defaulOption = select.querySelector('[select-option]');
  const activeOption = select.querySelector('[select-active]');
  activeOption.setAttribute('data-value', value);
  activeOption.textContent = value ? value : defaulOption.textContent;
};
const initOptions = (select, type) => {
  const options = select.querySelectorAll('[select-option]');
  options.forEach(option => {
    const handleOption = () => {
      const value = option.getAttribute('data-value');
      const mobileSelect = document.querySelector(`[mobile-filter][select-input="${type}"]`);
      mobileSelect.value = value;
      updateOptions(select, value);
      if (updateFilters) updateFilters(type, value);
    };
    option.addEventListener('click', handleOption);
  });
};
const initSelects = () => {
  mobileSelects.forEach(select => {
    const type = select.getAttribute('select-input');
    const desktopSelect = document.querySelector(`[desktop-filter][select-input="${type}"]`);
    select.addEventListener('change', () => {
      updateOptions(desktopSelect, select.value);
      if (updateFilters) updateFilters(type, select.value);
    });
  });
  desktopSelects.forEach(select => {
    const type = select.getAttribute('select-input');
    initOptions(select, type);
    select.addEventListener('click', () => {
      select.classList.toggle('-expand');
    });
  });
  document.addEventListener('click', outsideClick);
};
if (desktopSelects.length && mobileSelects.length) initSelects();