/* eslint-disable react/no-unknown-property */
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

const VideoPopup = ({ isOpened, videoUrl, onClose }) => {
  const [ showPopup, setShowPopup ] = useState(isOpened);

  useEffect(() => {
    setShowPopup(isOpened);

    // Disables scrollbar 
    if (isOpened) {
      document.body.style.position = 'fixed';
    } else {
      document.body.style.position = 'unset';
    }
  }, [ isOpened ]);

  if (!showPopup) {
    return (null);
  }
  
  return (
    <div className="c-video-popup">
      <div className="c-video-popup__video-wrapper">
        <iframe className={'c-video-popup__video'} 
          src={videoUrl} 
          frameBorder="0" 
          webkitallowfullscreen="true"
          mozallowfullscreen="true" 
          allowfullscreen="true"
          allow="autoplay; encrypted-media" />
        <i className="c-video-popup__close-icon icon-close-hamburger" onClick={onClose} />
      </div>
    </div>
  );
};

VideoPopup.propTypes = {
  isOpened: PropTypes.bool,
  videoUrl: PropTypes.string,
  onClose: PropTypes.func,
};

export { VideoPopup };