import React from 'react';
import PropTypes from 'prop-types';

import FadeElement from './Fade.style';

const Fade = (props) => {
  const { children } = props;

  const [isVisible, setVisible] = React.useState(false);
  const domRef = React.useRef();

  /* istanbul ignore next */
  const fadeIn = `${isVisible ? 'is-visible' : ''}`;

  React.useEffect(() => {
    /* istanbul ignore next */
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      });
    });
    observer.observe(domRef.current);
  }, []);

  return (
    <FadeElement className={fadeIn} ref={domRef}>
      {children}
    </FadeElement>
  );
};

Fade.propTypes = {
  children: PropTypes.element.isRequired,
};

Fade.displayName = 'Fade';

export default Fade;