// Top chrome: TUTKE wordmark, document meta, reader-mode + share buttons.
// Also includes the reading-progress bar.

const Chrome = ({ onOpenReader, readingTime, overNight }) => {
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const cls = "chrome" + (overNight ? " over-night" : "");

  return (
    <React.Fragment>
      <div className="progress" aria-hidden="true">
        <div className="progress-fill" style={{ width: progress + '%' }}></div>
      </div>
      <div className={cls}>
        <a href="/" className="chrome-logo" style={{textDecoration:'none',color:'inherit'}}>Tutke</a>
        <span className="chrome-meta chrome-document-meta">
          Eduskuntavaalitavoitteet · 2027
        </span>
        <span className="chrome-spacer"></span>
        <span className="chrome-meta chrome-reading-time">
          {readingTime} min
        </span>
        <a className="chrome-link chrome-link--accent" href="/vaalitavoitteet/teksti/" onClick={(event) => {
          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
          event.preventDefault();
          onOpenReader();
        }}>Lue tekstinä</a>
        <a className="chrome-link chrome-link--accent" href="/vaalitavoitteet/tutke-vaalitavoitteet-2027.pdf" download="tutke-vaalitavoitteet-2027.pdf" type="application/pdf">Lataa PDF</a>
      </div>
    </React.Fragment>
  );
};

window.Chrome = Chrome;