const {
  Fragment,
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} = React;

// returns a static function that will always call the latest callback
const useDynamicCallback = value => {
  const ref = useRef(value);
  useEffect(() => {
    ref.current = value;
  });
  return useCallback(() => ref.current(), []);
}

const useScrollSpy = handleScroll => {
  // static callback means we don't have to sub/unsub on each render
  const onScroll = useDynamicCallback(handleScroll);
  
  useLayoutEffect(() => {
    // Create scroll listener and call it once to initialize
    document.addEventListener('scroll', onScroll);
    onScroll();

    // Clean up scroll listener on unmount
    return () => document.removeEventListener('scroll', onScroll);
  }, []);
};

const Page = ({title, subtitle, background}) => {
  const style = { backgroundImage: `url("${background}")` };
  const bgStyle = { ...style, left: 0, right: 0 };
  
  const bgRef = useRef();
  const centerRef = useRef();
  const pageRef = useRef();
  const staticRef = useRef();
  
  // useScrollSpy to update on scroll
  useScrollSpy(() => {
    const {scrollTop} = document.scrollingElement;
    const offset = scrollTop - pageRef.current.offsetTop;
    staticRef.current.style.clipPath = `inset(${-offset}px 0 0)`;
    
    const {offsetTop, offsetHeight} = centerRef.current;
    const pageHeight = pageRef.current.offsetHeight;
    bgRef.current.style.top     = `-${offsetTop}px`;
    bgRef.current.style.bottom  = `${offsetTop + offsetHeight - pageHeight}px`;
  });
  
  return (
    <div className="page" style={style} ref={pageRef}>
      <div className="static" ref={staticRef}>
        <div className="centered" ref={centerRef}>
          <div className='bg' style={bgStyle} ref={bgRef} />
          <h1>{title}</h1>
          <h2>{subtitle}</h2>
        </div>
      </div>
    </div>
  )
}

const App = () => (
  <Fragment>
    <Page title="This is the first page" subtitle="Of this fancy scroll thing"
      background="http://www.hdwallpaperspulse.com/wp-content/uploads/2017/03/28/awesome-railway-road-image.jpg" />
    <Page title="This is the second page" subtitle="Of this nifty scroll thingie"
      background="http://sfwallpaper.com/images/background-images-hd-18.jpg" />
    <Page title="This is the third page" subtitle="Of this dope ass scroll shit"
      background="http://sfwallpaper.com/images/cool-background-picture-20.jpg" />
  </Fragment>
);

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