/* global React, Icon, euro, FEEST, Button */

/* flat list of all menu items for lookups */
const ALL_ITEMS = window.FEEST.menu.flatMap((c) => c.items);
const ITEM_BY_ID = Object.fromEntries(ALL_ITEMS.map((i) => [i.id, i]));

/* build cart lines + total from order state */
function buildOrder(state) {
  const lines = [];
  ALL_ITEMS.forEach((it) => {
    const q = state.order.items[it.id] || 0;
    if (q > 0) lines.push({ key: it.id, name: it.name, qty: q, price: it.price, total: q * it.price });
  });
  if (state.order.tokens > 0) {
    lines.push({ key: "tokens", name: "Drinkmuntjes", sub: euro(FEEST.tokenPrice) + " per muntje", qty: state.order.tokens, price: FEEST.tokenPrice, total: state.order.tokens * FEEST.tokenPrice, kind: "token" });
  }
  if (state.order.donation > 0) {
    lines.push({ key: "donation", name: "Bijdrage Ouderraad (OR)", qty: 1, price: state.order.donation, total: state.order.donation, kind: "donation" });
  }
  const total = lines.reduce((s, l) => s + l.total, 0);
  const count = lines.filter((l) => l.kind !== "donation").reduce((s, l) => s + l.qty, 0);
  return { lines, total, count };
}

/* ---------- Cart sidebar ---------- */
function Cart({ state, onPrimary, primaryLabel = "Naar overzicht", primaryDisabled, footnote, desktop }) {
  const { lines, total, count } = buildOrder(state);
  return (
    <aside className={"cart" + (desktop ? " cart--desktop" : "")}>
      <div className="card">
        <h3><Icon name="bag" size={20} /> Je mandje</h3>
        {lines.length === 0 ? (
          <div className="empty">
            <Icon name="bag" size={28} /><br />
            Nog niets toegevoegd.<br />Kies hierboven je eten en drinken.
          </div>
        ) : (
          <React.Fragment>
            <div className="cart-lines">
              {lines.map((l) => (
                <div className="cart-line" key={l.key}>
                  <span className="ql">{l.kind === "donation" ? "" : l.qty + "×"}</span>
                  <span className="nm">{l.name}{l.sub && <small>{l.sub}</small>}</span>
                  <span className="pr tnum">{euro(l.total)}</span>
                </div>
              ))}
            </div>
            <div className="cart-total">
              <span className="t-lbl">Totaal</span>
              <span className="t-val tnum">{euro(total)}</span>
            </div>
          </React.Fragment>
        )}
        {onPrimary && (
          <div style={{ marginTop: 18 }}>
            <Button block iconRight="right" onClick={onPrimary} disabled={primaryDisabled}>{primaryLabel}</Button>
            {footnote && <p className="muted" style={{ fontSize: 12.5, textAlign: "center", margin: "12px 0 0" }}>{footnote}</p>}
          </div>
        )}
      </div>
    </aside>
  );
}

/* ---------- Mobile sticky cart bar ---------- */
function CartBar({ state, onPrimary, primaryLabel = "Verder", disabled }) {
  const { total, count } = buildOrder(state);
  return (
    <div className="cartbar">
      <div className="ct-info">
        <small>{count} {count === 1 ? "item" : "items"} in mandje</small>
        <b className="tnum">{euro(total)}</b>
      </div>
      <Button iconRight="right" onClick={onPrimary} disabled={disabled}>{primaryLabel}</Button>
    </div>
  );
}

Object.assign(window, { buildOrder, ALL_ITEMS, ITEM_BY_ID, Cart, CartBar });