import { Video as VideoI } from '../../models/page';
import { Image } from '../../models/common';
import ReactPlayer from 'react-player';
import styles from './Video.module.scss';

export type Props = {
  video: VideoI;
  image?: Image;
  video_auto_play?: boolean;
  video_muted?: boolean;
  video_show_controls?: boolean;
  loop?: boolean;
  className?: string;
  onEnded?: () => void;
};

const Video = (props: Props): JSX.Element => {
  const {
    video,
    image,
    video_auto_play = true,
    video_muted = true,
    video_show_controls = false,
    loop = true,
    className,
    onEnded = () => {},
  } = props;

  return (
    <div className={`${styles.video} ${className ? className : ''}`}>
      <div className={styles.container}>
        {video.src && (
          <ReactPlayer
            className={styles.reactPlayer}
            url={video.src}
            width="100%"
            height="100%"
            light={!video_auto_play ? (image?.src ? image?.src : true) : false}
            playing={true}
            muted={video_muted}
            loop={loop}
            autoPlay={'autoplay'}
            playsinline={true}
            controls={video_show_controls}
            config={{
              youtube: {
                playerVars: { showinfo: 0, controls: 0, disablekb: 1 },
              },
            }}
            controlsList="nodownload"
            onEnded={onEnded}
          />
        )}
      </div>
    </div>
  );
};

export default Video;