import React from 'react'
import { StackView, Typography } from '@telus-uds/components-base'
import PropTypes from 'prop-types'
import WebVideo from '../WebVideo/WebVideo'
import { VideoPropType, RefPropType } from './videoPropType'

const VideoPickerPlayer = React.forwardRef(
  ({ video = {}, videoPlayerRef, onStartVideo = () => {} }, ref) => (
    <StackView space={3} tokens={{ flexShrink: 1 }} ref={ref}>
      <div ref={videoPlayerRef}>
        {video.videoId && <WebVideo {...video} onStart={() => onStartVideo(video)} />}
      </div>
      <StackView space={2}>
        <Typography variant={{ size: 'h3' }}>{video.title}</Typography>
        <Typography variant={{ colour: 'default' }}>{video.description}</Typography>
      </StackView>
    </StackView>
  )
)

VideoPickerPlayer.displayName = 'VideoPickerPlayer'

VideoPickerPlayer.propTypes = {
  video: VideoPropType,
  videoPlayerRef: RefPropType,
  onStartVideo: PropTypes.func
}

export default VideoPickerPlayer