/* global React, Header, Footer, Home, Game, Contact, WishlistModal */
const { useState, useEffect } = React;

const ROUTES = ['home', 'game', 'contact'];

const App = () => {
  const initial = (() => {
    const h = (window.location.hash || '').replace('#', '');
    return ROUTES.includes(h) ? h : 'home';
  })();
  const [route, setRoute] = useState(initial);
  const [wishlistOpen, setWishlistOpen] = useState(false);

  useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace('#', '');
      setRoute(ROUTES.includes(h) ? h : 'home');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const nav = (id) => {
    setRoute(id);
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const onWishlist = () => setWishlistOpen(true);

  const View = route === 'game' ? Game : route === 'contact' ? Contact : Home;

  return (
    <div data-screen-label={`Site / ${route}`} style={{ minHeight: '100vh', background: 'var(--pond-black)' }}>
      <Header route={route} onNav={nav} />
      <div key={route} className="route-anim">
        <View onNav={nav} onWishlist={onWishlist} />
      </div>
      <Footer onNav={nav} />
      {wishlistOpen && <WishlistModal onClose={() => setWishlistOpen(false)} />}
    </div>
  );
};

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