// 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}>
        <span className="chrome-logo">T U T K E</span>
        <span className="chrome-meta" style={{ display: window.innerWidth > 700 ? 'inline' : 'none' }}>
          Eduskuntavaalitavoitteet · 2027
        </span>
        <span className="chrome-spacer"></span>
        <span className="chrome-meta" style={{ display: window.innerWidth > 600 ? 'inline' : 'none' }}>
          {readingTime} min
        </span>
        <button className="chrome-link chrome-link--accent" onClick={onOpenReader}>Lue tekstinä</button>
        <button className="chrome-link" onClick={() => window.print()} style={{ display: window.innerWidth > 700 ? 'inline-block' : 'none' }}>Tulosta</button>
      </div>
    </React.Fragment>
  );
};

window.Chrome = Chrome;