/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio,
   SiteHeader, SiteFooter, WhatsAppFAB, ScrollProgress,
   HomePage, ProductPage, KanbanPage, GanttPage, VideoPage,
   PricingPage, ContactPage, BlogIndexPage, BlogPostPage */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = window.__TWEAK_DEFAULTS || { accent: 'bold', cardStyle: 'bordered' };

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState('home');
  const [postId, setPostId] = useState(null);

  // Apply tweaks to body
  useEffect(() => {
    document.body.dataset.accent = tweaks.accent;
    document.body.dataset.cardStyle = tweaks.cardStyle;
  }, [tweaks.accent, tweaks.cardStyle]);

  const go = (r) => { setRoute(r); setPostId(null); window.scrollTo({ top: 0 }); };
  const openPost = (id) => { setPostId(id); setRoute('post'); window.scrollTo({ top: 0 }); };
  const backToBlog = () => { setRoute('blog'); setPostId(null); window.scrollTo({ top: 0 }); };

  return (
    <>
      <ScrollProgress/>
      <div data-screen-label={"Site / " + route}>
        <SiteHeader route={route === 'post' ? 'blog' : route} go={go}/>
        {route === 'home' && <HomePage go={go}/>}
        {route === 'product' && <ProductPage go={go}/>}
        {route === 'kanban' && <KanbanPage go={go}/>}
        {route === 'gantt' && <GanttPage go={go}/>}
        {route === 'video' && <VideoPage go={go}/>}
        {route === 'pricing' && <PricingPage go={go}/>}
        {route === 'contact' && <ContactPage/>}
        {route === 'blog' && <BlogIndexPage openPost={openPost}/>}
        {route === 'post' && <BlogPostPage id={postId} back={backToBlog}/>}
        <SiteFooter go={go}/>
        <WhatsAppFAB/>
      </div>

      <TweaksPanel>
        <TweakSection label="Theme"/>
        <TweakRadio
          label="Accent color"
          value={tweaks.accent}
          options={['bold', 'safe']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Card style"/>
        <TweakRadio
          label="Card treatment"
          value={tweaks.cardStyle}
          options={['flat', 'bordered', 'shadow']}
          onChange={(v) => setTweak('cardStyle', v)}
        />
      </TweaksPanel>
    </>
  );
}

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