/* Enfito — Main App */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "homeVariant": "v1"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState({ page: 'home' });
  const [cart, setCart] = React.useState({});
  const [favs, setFavs] = React.useState(new Set());
  const [toast, setToast] = React.useState({ show: false, msg: '' });

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme || 'light');
  }, [tweaks.theme]);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [route]);

  const showToast = (msg) => {
    setToast({ show: true, msg });
    setTimeout(() => setToast({ show: false, msg: '' }), 2400);
  };

  const onAdd = (id) => {
    setCart(c => ({ ...c, [id]: (c[id] || 0) + 1 }));
    const p = window.ENFITO_PRODUCT_BY_ID[id];
    showToast(`${p.name} დაემატა კალათაში`);
  };
  const onRemove = (id) => {
    setCart(c => { const n = { ...c }; delete n[id]; return n; });
  };
  const onSetQty = (id, qty) => {
    if (qty <= 0) onRemove(id);
    else setCart(c => ({ ...c, [id]: qty }));
  };
  const onFav = (id) => {
    setFavs(f => {
      const n = new Set(f);
      n.has(id) ? n.delete(id) : n.add(id);
      return n;
    });
  };

  const cartCount = Object.values(cart).reduce((s, q) => s + q, 0);
  const onNav = (r) => setRoute(r);

  let pageEl;
  if (route.page === 'home') {
    pageEl = tweaks.homeVariant === 'v2'
      ? <HomeV2 onNav={onNav} onAdd={onAdd} onFav={onFav} favs={favs} />
      : <HomeV1 onNav={onNav} onAdd={onAdd} onFav={onFav} favs={favs} />;
  } else if (route.page === 'listing') {
    pageEl = <Listing route={route} onNav={onNav} onAdd={onAdd} onFav={onFav} favs={favs} />;
  } else if (route.page === 'pdp') {
    pageEl = <PDP route={route} onNav={onNav} onAdd={onAdd} onFav={onFav} favs={favs} />;
  } else if (route.page === 'cart') {
    pageEl = <Cart cart={cart} onNav={onNav} onAdd={onAdd} onRemove={onRemove} onSetQty={onSetQty} onFav={onFav} favs={favs} />;
  }

  const { TweaksPanel, TweakSection, TweakRadio } = window;

  return (
    <React.Fragment>
      <Header cartCount={cartCount} onNav={onNav} currentRoute={route} />
      {pageEl}
      <Footer />
      <Toast show={toast.show} msg={toast.msg} />
      <TweaksPanel title="Tweaks">
        <TweakSection title="გარეგნობა">
          <TweakRadio label="თემა"
            value={tweaks.theme}
            onChange={v => setTweak('theme', v)}
            options={[{ value: 'light', label: 'ღია' }, { value: 'dark', label: 'მუქი' }]} />
        </TweakSection>
        <TweakSection title="მთავარი გვერდი">
          <TweakRadio label="ვარიანტი"
            value={tweaks.homeVariant}
            onChange={v => setTweak('homeVariant', v)}
            options={[{ value: 'v1', label: 'რედაქცია' }, { value: 'v2', label: 'სპლიტი' }]} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);