/* global React, ReactDOM, GameProvider, useGame, StatusBar, AppBar, Wallet, Marquee, TopTabs, SubTabs,
   Splash, CarScreen, RefitScreen, TreasureScreen, MoneyScreen, WelfareScreen, RulesScreen,
   RefitPrompt, BoxPrompt, DrawResult, DiceResult, useState */

const TOP_TABS = [
  { key: "car", zh: "跑車專區", en: "Car Zone" },
  { key: "rich", zh: "發財專區", en: "Rich Zone" },
  { key: "welfare", zh: "福利專區", en: "Welfare" },
];

function AppInner() {
  const g = useGame();
  const [view, setView] = useState("splash");
  const [top, setTop] = useState("car");
  const [carSub, setCarSub] = useState("exchange");
  const [richSub, setRichSub] = useState("gift");
  const [rules, setRules] = useState(false);
  const [popup, setPopup] = useState(null);
  const [reload, setReload] = useState(0);

  const back = () => {
    if (rules) { setRules(false); return; }
    if (top === "car" && carSub === "refit") { setCarSub("exchange"); return; }
    setView("splash");
  };

  let content;
  if (rules) content = React.createElement(RulesScreen);
  else if (top === "car") content = carSub === "exchange"
    ? React.createElement(CarScreen, { onExchangeS: () => setPopup({ t: "refit" }) })
    : React.createElement(RefitScreen, { onConfirm: () => { } });
  else if (top === "rich") content = richSub === "gift"
    ? React.createElement(TreasureScreen, {
        onBoxOpen: (lv) => setPopup({ t: "box", lv }),
        onDrawResult: (d, times) => setPopup({ t: "draw", result: d, times })
      })
    : React.createElement(MoneyScreen, { onResult: (res) => setPopup({ t: "dice", res }) });
  else content = React.createElement(WelfareScreen);

  // sub tabs
  let subtabs = null;
  if (!rules && top === "car")
    subtabs = React.createElement(SubTabs, {
      tabs: [{ key: "exchange", label: "兌換" }, { key: "refit", label: "S 級定制" }],
      active: carSub, onChange: setCarSub
    });
  else if (!rules && top === "rich")
    subtabs = React.createElement(SubTabs, {
      tabs: [{ key: "gift", label: "發財禮物" }, { key: "money", label: "發財車號" }],
      active: richSub, onChange: setRichSub
    });

  if (view === "splash")
    return React.createElement("div", { className: "screen" },
      React.createElement(StatusBar),
      React.createElement(Splash, { onEnter: () => setView("app") }));

  return React.createElement("div", { className: "screen" },
    React.createElement("div", { className: "screen-scroll" },
      React.createElement(StatusBar),
      React.createElement(AppBar, { onBack: back, onNotebook: () => setRules(r => !r) }),
      !rules && React.createElement(TopTabs, { tabs: TOP_TABS, active: top, onChange: (k) => { setTop(k); setRules(false); } }),
      !rules && React.createElement(Marquee),
      subtabs,
      React.createElement("div", { key: (rules ? "rules" : top + carSub + richSub) + "-" + reload }, content),
      React.createElement("div", { className: "foot" },
        "活動最終解釋權歸主辦方所有", React.createElement("br"), "本活動與 Apple Inc. 無關")
    ),

    // toast
    g.toast && React.createElement("div", { className: "toast" }, g.toast),

    // popups
    popup && popup.t === "refit" && React.createElement(RefitPrompt, {
      onClose: () => setPopup(null),
      onDirect: () => { setPopup(null); g.showToast("基礎款座駕已發放至背包"); },
      onGo: () => { setPopup(null); setTop("car"); setCarSub("refit"); }
    }),
    popup && popup.t === "box" && React.createElement(BoxPrompt, {
      lv: popup.lv, onClose: () => setPopup(null),
      onOpen: async () => {
        const lv = popup.lv; setPopup(null);
        try { await scf("treasure/chest/open", { level: lv, idemKey: scfIdem() }); g.showToast(`已開啟 ${lv} 級寶箱，進度重新衝刺`); g.refreshWallet(); setReload(x => x + 1); }
        catch (e) { g.showToast("✗ " + e.message); }
      },
      onContinue: () => { const lv = popup.lv; setPopup(null); g.showToast(`已放棄 ${lv} 級寶箱，繼續開車衝刺更高級`); }
    }),
    popup && popup.t === "draw" && React.createElement(DrawResult, {
      result: popup.result, times: popup.times, onClose: () => { setPopup(null); setReload(x => x + 1); }, onAgain: () => { setPopup(null); setReload(x => x + 1); }
    }),
    popup && popup.t === "dice" && React.createElement(DiceResult, {
      res: popup.res, onClose: () => setPopup(null), onAgain: () => setPopup(null)
    })
  );
}

function App() {
  return React.createElement(GameProvider, null,
    React.createElement("div", { className: "stage" },
      React.createElement("div", { className: "phone" }, React.createElement(AppInner))));
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));