// Kawaii Charms Co, catalog grid components.
// Shared by shop.html, coasters.html and magnets.html. Compiled in the
// browser by @babel/standalone, so this file must load before the page's
// own babel block.
const { useState, useMemo } = React;

function MagnetArt({ product }) {
  return (
    <div className="mag">
      <div className="ph" style={{ background: product.photo }}></div>
      <div className="cp">{product.cap}</div>
    </div>
  );
}

function ProductCard({ p, kind }) {
  return (
    <a className="pcard" href={`product.html?id=${p.id}`}>
      <div className={`art ${p.productPhoto ? 'photo' : (kind === 'magnet' ? 'fridge' : 'table')}`}>
        {p.badge === 'popular' && <span className="badge">Popular</span>}
        {p.badge === 'new'     && <span className="badge new">New</span>}
        {p.productPhoto
          ? <img className="full" loading="lazy" decoding="async" src={p.productPhoto} alt="" />
          : <MagnetArt product={p} />}
      </div>
      <div className="info"><h3 className="nm">{p.name}</h3><span className="pr">${p.price.toFixed(2)}</span></div>
      <div className="mt">{p.sizeDesc}</div>
    </a>
  );
}

function sortItems(items, sort) {
  const s = [...items];
  if (sort === 'price-lo')      s.sort((a, b) => a.price - b.price);
  else if (sort === 'price-hi') s.sort((a, b) => b.price - a.price);
  else if (sort === 'newest')   s.sort((a, b) => b.added.localeCompare(a.added));
  else if (sort === 'popular')  s.sort((a, b) => b.sales - a.sales);
  // 'featured' falls through untouched, keeping the catalog order the arrays
  // are written in: by pack size, standard before custom at each size.
  return s;
}

function Group({ id, head, em, note, items, kind }) {
  const n = items.length;
  return (
    <div className="grp" id={id}>
      <div className="grp-h">
        <h2>{head} <em>{em}</em></h2>
        <span className="cnt">{n} {n === 1 ? 'option' : 'options'} · {note}</span>
      </div>
      <div className="pgrid">{items.map(p => <ProductCard key={p.id} p={p} kind={kind} />)}</div>
    </div>
  );
}

// `chips` is [key, label] pairs, so each page decides what it filters by.
// Pass an empty list to show the sort control on its own.
function FilterBar({ filter, setFilter, sort, setSort, counts, chips }) {
  const list = chips || [['all', 'All'], ['magnets', '🧲 Magnets'], ['coasters', '🥃 Coasters'], ['new', '✨ New']];
  return (
    <>
      {list.length > 0 && (
        <div className="fchips">
          {list.map(([key, label]) => (
            <button key={key} type="button" className={filter === key ? 'on' : ''}
                    onClick={() => setFilter(key)} aria-pressed={filter === key}>
              {label} <span className="n">{counts[key]}</span>
            </button>
          ))}
        </div>
      )}
      <div className="fsort">
        <select id="shop-sort" aria-label="Sort products" value={sort} onChange={(e) => setSort(e.target.value)}>
          <option value="featured">Featured</option>
          <option value="popular">Most popular</option>
          <option value="price-lo">Price: low to high</option>
          <option value="price-hi">Price: high to low</option>
          <option value="newest">Newest</option>
        </select>
      </div>
    </>
  );
}