/* eslint-disable */
const { useState: useState_a, useEffect: useEffect_a } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "workshop",
  "hotspots": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState_a({ name: "home" });
  const shop = window.useShop();

  // Drawer / modal open state
  const [cartOpen, setCartOpen] = useState_a(false);
  const [garageOpen, setGarageOpen] = useState_a(false);
  const [compareOpen, setCompareOpen] = useState_a(false);
  const [quickViewId, setQuickViewId] = useState_a(null);

  const tweaksHook = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [tweaks, setTweak] = tweaksHook;

  // Reset body variant class when leaving detail
  useEffect_a(() => {
    if (route.name !== "detail") {
      document.body.classList.remove("detail-workshop", "detail-garage", "detail-blueprint");
      document.body.classList.add("detail-workshop");
    }
  }, [route.name]);

  // Scroll to top on route change
  useEffect_a(() => {
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [route.name, route.id]);

  // Push to recents on detail view
  useEffect_a(() => {
    if (route.name === "detail" && route.id) shop.pushRecent(route.id);
  }, [route.name, route.id]);

  const navigate = (newRoute) => setRoute(newRoute);
  const openCart    = () => setCartOpen(true);
  const openGarage  = () => setGarageOpen(true);
  const openCompare = () => setCompareOpen(true);
  const openQuickView = (id) => setQuickViewId(id);

  const pageProps = {
    navigate, shop,
    openCart, openGarage, openCompare, openQuickView,
  };

  let page;
  if (route.name === "home") page = <window.HomePage {...pageProps} />;
  else if (route.name === "catalog") page = <window.CatalogPage {...pageProps} initialFilter={route.filter} />;
  else if (route.name === "detail") page = <window.DetailPage {...pageProps} partId={route.id} tweaks={tweaks} setTweak={setTweak} />;

  return (
    <>
      {page}

      {/* Cart drawer */}
      <window.CartDrawer shop={shop} open={cartOpen} onClose={() => setCartOpen(false)} navigate={navigate} />
      {/* Garage drawer */}
      <window.GarageDrawer shop={shop} open={garageOpen} onClose={() => setGarageOpen(false)} navigate={navigate} />
      {/* Compare bar + modal */}
      <window.CompareBar shop={shop} onOpen={openCompare} />
      <window.CompareModal shop={shop} open={compareOpen} onClose={() => setCompareOpen(false)} navigate={navigate} />
      {/* Quick view */}
      <window.QuickView shop={shop} partId={quickViewId} open={!!quickViewId} onClose={() => setQuickViewId(null)} navigate={navigate} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Detail-page theme">
            <window.TweakRadio
              label="Variant"
              value={tweaks.variant}
              onChange={(v) => setTweak("variant", v)}
              options={[
                { value: "workshop", label: "Workshop" },
                { value: "garage", label: "Garage" },
                { value: "blueprint", label: "Blueprint" },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection label="3D viewer">
            <window.TweakToggle
              label="Show hotspots"
              value={tweaks.hotspots}
              onChange={(v) => setTweak("hotspots", v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Jump to">
            <window.TweakButton label="Home" onClick={() => navigate({ name: "home" })} />
            <window.TweakButton label="Catalogue" onClick={() => navigate({ name: "catalog" })} />
            <window.TweakButton label="Brake disc" onClick={() => navigate({ name: "detail", id: "brake-disc" })} />
            <window.TweakButton label="Spark plug" onClick={() => navigate({ name: "detail", id: "spark-plug" })} />
            <window.TweakButton label="Alternator" onClick={() => navigate({ name: "detail", id: "alternator" })} />
            <window.TweakButton label="Tire" onClick={() => navigate({ name: "detail", id: "tire" })} />
          </window.TweakSection>
          <window.TweakSection label="Drawers">
            <window.TweakButton label="Open cart" onClick={openCart} />
            <window.TweakButton label="Open garage" onClick={openGarage} />
            <window.TweakButton label="Quick view: Brake disc" onClick={() => openQuickView("brake-disc")} />
          </window.TweakSection>
          <window.TweakSection label="Demo data">
            <window.TweakButton label="Add 3 demo cars" onClick={() => {
              shop.addVehicle({ kind: "mmy", make: "BMW", model: "3 Series", year: 2021, display: "2021 BMW 3 Series · 2.0 TDI" });
              shop.addVehicle({ kind: "mmy", make: "Audi", model: "A4", year: 2019, display: "2019 Audi A4 · 2.0 TFSI" });
              shop.addVehicle({ kind: "reg", value: "VK68 ZRX", display: "VK68 ZRX" });
            }} />
            <window.TweakButton label="Add demo parts to cart" onClick={() => {
              shop.addToCart("brake-disc", 2);
              shop.addToCart("oil-filter", 1);
              shop.addToCart("spark-plug", 4);
            }} />
            <window.TweakButton label="Add to compare" onClick={() => {
              shop.toggleCompare("brake-disc");
              shop.toggleCompare("brake-pad");
              shop.toggleCompare("oil-filter");
            }} />
            <window.TweakButton label="Reset everything" onClick={() => {
              localStorage.removeItem("fcp.shop.v1");
              window.location.reload();
            }} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);