import React, { useRef, useState } from 'react'
import PropTypes from 'prop-types';
import sy from './video-widget.module.scss'
import { css } from '@emotion/css'
import ReactPlayer from 'react-player/lazy'
import classNames from 'classnames'


const configYoutube = {
  youtube: {
    playerVars: { showinfo: 1 }
  }
}

const VideoWidget = (props) => {
  const {
    config,
    url,
    playing,
    controls,
    loop,
    muted,
    volume,
    light,
    width,
    height,
    marginBottom,
  } = props

  if (!url) {
    return null
  }


  return (
    <div
      className={classNames(css`
        margin-bottom: ${marginBottom}px;
      `,
        sy.boxVideoWidget,
      )}
    >
      <div className={sy.boxVideo}>
        <ReactPlayer
          config={config}
          url={url}
          playing={playing}
          controls={controls}
          loop={loop}
          muted={muted}
          volume={volume}
          light={light}
          width={width}
          height={height}

          style={{
            backgroundColor: '#333333',
            width: '100%',
            // height: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        />
      </div>
    </div >
  )
}


VideoWidget.propTypes = {
  config: PropTypes.any,
  url: PropTypes.string,
  playing: PropTypes.any,
  controls: PropTypes.any,
  loop: PropTypes.any,
  muted: PropTypes.any,
  volume: PropTypes.number,
  light: PropTypes.any,
  width: PropTypes.string,
  height: PropTypes.string,
  marginBottom: PropTypes.number,
};

VideoWidget.defaultProps = {
  config: configYoutube,
  url: null,
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: 'auto',
  height: 'auto',
  marginBottom: 0,
};


export default VideoWidget