import { useRef } from 'react'

import { VideoPlayer } from 'features/VideoPlayer'
import { Icon } from 'features/Icon'

import { readToken } from 'helpers'

import { isProduction } from 'config/env'

import { ScModal, ScCloseButton } from './styled'

interface VideoPropsType {
  isOpenPopupVideo: boolean,
  setIsOpenPopupVideo: (open: boolean) => void,
}

const urls = {
  production: 'https://instat-stream-production.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
  stage: 'https://instat-stream-staging.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
}

export const VideoHighlight = ({
  isOpenPopupVideo,
  setIsOpenPopupVideo,
} :VideoPropsType) => {
  const videoRef = useRef<HTMLVideoElement>(null)

  return (
    <ScModal
      isOpen={isOpenPopupVideo}
      close={() => setIsOpenPopupVideo(false)}
      withCloseButton={false}
    >
      <VideoPlayer
        src={`${isProduction ? urls.production : urls.stage}?access_token=${readToken()}`}
        ref={videoRef}
        playing={Boolean(false)}
        muted={false}
        isFullscreen={false}
        controls={Boolean(true)}
      />
      <ScCloseButton onClick={() => setIsOpenPopupVideo(false)}>
        <Icon refIcon='Close' styles={{ marginTop: '3px' }} />
      </ScCloseButton>
    </ScModal>
  )
}