import React, { useEffect, useState } from "react";
import { useSpring, animated } from "react-spring";
import { Waypoint } from "react-waypoint";

const FadeInContainer = ({ children, loadVisibile, delay }) => {
  const [isVisible, setVisibility] = useState(false);
  const [isReady, setReady] = useState(false);
  const props = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "translateY(0px)" : "translateY(50px)",
    delay: delay ? delay : 500,
  });
  const onChange = (visiblity) => {
    (isReady || loadVisibile) && setVisibility(visiblity);
  };

  useEffect(() => {
    setReady(true);
  }, []);

  return (
    <Waypoint onEnter={() => onChange(true)}>
      <animated.div style={props}>{children}</animated.div>
    </Waypoint>
  );
};

export default FadeInContainer;
