/* global React, useApp, Photo, Icon, DishCard, DishModal, MENU, COMBOS, DRINKS, SIDES */
const { useState: useStateM } = React;

function SimpleAddCard({ item, icon }) {
  const { addItem } = useApp();
  return (
    <div className="dish" style={{ flexDirection: "row", alignItems: "center", padding: 14, gap: 14 }}>
      <Photo tone="#EAD9B0" icon={icon} showSun={false} src={item.image} alt="" style={{ width: 76, height: 76, borderRadius: 14, flexShrink: 0 }} />
      <div style={{ flex: 1 }}>
        <h3 style={{ fontSize: 17 }}>{item.name}</h3>
        <span className="price" style={{ fontSize: 18 }}>R$ {item.price}</span>
      </div>
      <button className="btn btn-pine btn-sm" onClick={() => addItem({ name: item.name, tone: "#EAD9B0", image: item.image, unit: item.price, qty: 1, note: "" })}>
        <Icon name="plus" size={15} />
      </button>
    </div>
  );
}

function Cardapio() {
  const { nav } = useApp();
  const [dish, setDish] = useStateM(null);
  const [cat, setCat] = useStateM("sanduiches");
  const cats = [
    ["sanduiches", "Sanduíches", "bag2"],
    ["combos", "Combos", "spark"],
    ["acompanhamentos", "Acompanhamentos", "leaf"],
    ["bebidas", "Bebidas", "wave"],
  ];

  return (
    <main className="page">
      {/* header */}
      <section style={{ background: "var(--pine)", color: "var(--cream-50)", padding: "48px 0 56px", position: "relative", overflow: "hidden" }}>
        <div className="blur-sun" style={{ position: "absolute", right: "6%", top: "-90px", opacity: .35 }} />
        <div className="wrap" style={{ position: "relative" }}>
          <span className="dash-label" style={{ color: "var(--cream-50)" }}>Cardápio</span>
          <h1 style={{ color: "var(--cream-50)", fontSize: "clamp(34px,5vw,56px)", marginTop: 14 }}>Monte do seu jeito</h1>
          <p style={{ color: "rgba(251,239,215,.8)", marginTop: 12, fontSize: 17, maxWidth: "44ch" }}>
            Toque em montar para escolher pão, adicionais e acompanhamentos. Tudo feito na hora.
          </p>
        </div>
      </section>

      {/* category filter */}
      <div style={{ position: "sticky", top: 74, zIndex: 40, background: "color-mix(in srgb,var(--cream) 90%,transparent)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap" style={{ display: "flex", gap: 8, padding: "16px 24px", overflowX: "auto" }}>
          {cats.map(([id, label, ic]) => (
            <button key={id} className={"chip" + (cat === id ? " active" : "")} style={{ flexShrink: 0, padding: "10px 18px", fontSize: 14 }} onClick={() => setCat(id)}>
              <Icon name={ic} size={16} /> {label}
            </button>
          ))}
        </div>
      </div>

      <section className="section" style={{ paddingTop: 44 }}>
        <div className="wrap">
          {cat === "sanduiches" && (
            <div className="menu-grid">{MENU.map((d) => <DishCard key={d.id} dish={d} onOpen={setDish} />)}</div>
          )}

          {cat === "combos" && (
            <div className="menu-grid">
              {COMBOS.map((c) => {
                const base = MENU.find((m) => m.id === c.base);
                return (
                  <article className="dish" key={c.id}>
                    <div className="dish-photo">
                      <Photo tone={base.tone} icon="spark" showSun src={base.image} alt="" />
                      <span className="dish-flag" style={{ background: "var(--pine)", color: "var(--amber-200)" }}>Economize R$ {c.save}</span>
                    </div>
                    <div className="dish-body">
                      <h3>{c.name}</h3>
                      <p className="dish-desc">{c.desc}</p>
                      <div className="dish-foot">
                        <span className="price">a partir de R$ {base.price + 18}</span>
                        <button className="btn btn-pine btn-sm" onClick={() => setDish(base)}><Icon name="plus" size={16} /> Montar</button>
                      </div>
                    </div>
                  </article>
                );
              })}
            </div>
          )}

          {cat === "acompanhamentos" && (
            <div className="menu-grid">{SIDES.map((s) => <SimpleAddCard key={s.id} item={s} icon="leaf" />)}</div>
          )}
          {cat === "bebidas" && (
            <div className="menu-grid">{DRINKS.map((d) => <SimpleAddCard key={d.id} item={d} icon="wave" />)}</div>
          )}
        </div>
      </section>

      {dish && <DishModal dish={dish} onClose={() => setDish(null)} />}
    </main>
  );
}
Object.assign(window, { Cardapio });