// /themes/ and /plugins/: category filter and search over the build-time cards, the header
// progress line, and the panel shown when an "Install" link opened nothing (app not installed;
// install.ts, shared with the Store).
import { initProgress } from './common';
import { initInstall } from './install';

const cards = Array.from(document.querySelectorAll<HTMLElement>('[data-gallery] .gal-card'));
const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>('.gal-filters [data-filter]'));
const search = document.querySelector<HTMLInputElement>('[data-gallery-search]');
const empty = document.querySelector<HTMLElement>('[data-gallery-empty]');
let category = 'all';

function apply(): void {
  const words = (search?.value ?? '').toLowerCase().split(/\s+/).filter(Boolean);
  let shown = 0;
  for (const card of cards) {
    const visible = (category === 'all' || card.dataset.category === category) && words.every(word => (card.dataset.search ?? '').includes(word));
    card.hidden = !visible;
    if (visible) shown += 1;
  }
  if (empty) empty.hidden = shown > 0;
}

for (const button of buttons) {
  button.addEventListener('click', () => {
    category = button.dataset.filter ?? 'all';
    for (const other of buttons) {
      other.classList.toggle('is-on', other === button);
      other.setAttribute('aria-pressed', String(other === button));
    }
    apply();
  });
}
search?.addEventListener('input', apply);

initProgress();
initInstall();