import React, { Fragment, useEffect, useState } from 'react';
import PropTypes from 'prop-types';

function Parallax(props) {
  const [YPos, setYPos] = useState(0);
  const { uppermodulevisible, addclass } = props;

  function handleScroll() {
    if (uppermodulevisible === 1) {
      console.log("you were module visible", uppermodulevisible);
      let pos = Math.floor(window.scrollY * -1.5);
      // console.log('on scroll scroll scroll', pos);
      window.requestAnimationFrame(() => setYPos(pos));
    }
  }

  function setUp() {
    window.addEventListener('scroll', () => {
      handleScroll();
    }, false);
  }

  function tearDown() {
    window.removeEventListener('scroll', handleScroll, false);
  }

  useEffect(() => {
    setUp();
    return (() => tearDown());
  }, [uppermodulevisible]);

  return (
    <Fragment>
      <div
        style={ { transform: `translateY(${ YPos }px)` } }
        className={ addclass }
        { ...props }
      />
    </Fragment>
  );
}

Parallax.propTypes = {
  addclass: PropTypes.string,
  uppermodulevisible: PropTypes.number,
};

export default Parallax;