// ProductGrid: products as ProductCards in a grid that fits as many across as
// there is room for (this file needs product_card.qwe and price.qwe).
//
//   <ProductGrid products={db.query("select * from products")} action="/cart" currency="EUR"/>
//   <ProductGrid products={picks} size={200} on_add={(p) => { cart = cart | push(p) }}/>
//
// products: a list of maps with ProductCard's props (id, name, price, old, image,
// alt, href, brand, rating, reviews, badge, badge_tone, stock); other fields are
// ignored. currency, locale, cents, action, add_label, ratio, card_size ("sm" or
// "md"): the same for every card. size: each column's width at least, in pixels
// (220). gap: between cards, in pixels (16). empty: what to say with no products
// ("No products"). label: what screen readers call the grid ("Products").
// on_add(product): inside one of your components, given the product's map when
// its button is clicked (without an action).

import ui/product_card.qwe use ProductCard
import ui/theme.qwe use ui_cls

let product_grid_css = css`
.ui-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--s, 220px), 100%), 1fr)); gap: var(--g, 16px);
  margin: 0; padding: 0; list-style: none; }
.ui-product-grid > li { display: flex; min-width: 0; }
.ui-product-grid > li > .ui-product { flex: 1; }
.ui-product-grid-empty { padding: 32px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted);
  font: 14px/1.4 var(--ui-font); text-align: center; }
`

view ProductGrid(products: list = [], size: int = 220, gap: int = 16, currency: str = "USD", locale: str? = null,
                 cents: bool = true, action: str? = null, add_label: str = "Add to cart", ratio: str = "4/3",
                 card_size: str = "md", empty: str = "No products", label: str = "Products", on_add = null,
                 class: str? = null) {
    style global product_grid_css
    len(products) == 0
        ? <div class={ui_cls(["ui-product-grid-empty", class])} role="status">{empty}</div>
        : <ul class={ui_cls(["ui-product-grid", class])} style={`--s: ${size}px; --g: ${gap}px`} aria-label={label}>
            {for [i, p] in enumerate(products) => <li key={get(p, "id") ?? i}>
                <ProductCard {...p} id={get(p, "id") != null ? str(p.id) : null} currency={get(p, "currency") ?? currency} locale={locale} cents={cents}
                             action={action} add_label={add_label} ratio={ratio} size={card_size}
                             on_add={() => { on_add && on_add(p) }}/>
            </li>}
        </ul>
}