import React from 'react'
import { fromIshToString } from 'exotic'
import { omit, keep, toUrlWithProtocol } from '@skava/utils'
import { VideoPlayer as Video } from '@skava/ui/dist/components/atoms/Video'
import { VideoControls } from './VideoControls'
import {
  VideoPresetProps,
  VideoPresetControlProps,
  VideoPresetStateType,
} from './typings'
import { PlaceholderImage } from './styled'

const CONTROL_PROPS = Object.freeze([
  'state',
  'videoLength',
  'title',
  'slogan',
  'shareTitle',
])

const VIDEO_PROPS = Object.freeze([
  'src',
  'state',
  'thumbnailImage',
  'shouldAutoPlay',
  'shouldLoop',
  'preload',
  'muted',
  'hasNativeControls',
  'hasPlayButton',
  'shouldShowVideoInformation',
])

export function defaultRenderControls(
  props: VideoPresetControlProps,
  state: VideoPresetStateType
) {
  const controlProps = keep(props, CONTROL_PROPS)
  return <VideoControls {...controlProps} state={state} />
}

export function defaultRenderVideo(
  props: VideoPresetProps,
  state: VideoPresetStateType
) {
  const { mp4Source, ...remainingProps } = props
  const strippedProps = omit(remainingProps, CONTROL_PROPS)
  const { src: videoUrl, ...strippedRemainingProps } = strippedProps
  // console.log('videoUrl', videoUrl)
  const videoSrc = fromIshToString(videoUrl[0])

  if (videoSrc !== '') {
    const validVideoSrc = toUrlWithProtocol(videoSrc)
    const src = [validVideoSrc]
    const videoProps = {
      src,
      ...strippedRemainingProps,
      // props overwriting from state
      hasNativeControls: state.hasNativeControls,
      hasPlayButton: state.hasPlayButton,
      shouldShowVideoInformation: state.shouldShowVideoInformation,
      isPaused: !state.isPlaying,
      muted: strippedRemainingProps.shouldAutoPlay,
    }
    return <Video {...videoProps} />
  } else {
    return <PlaceholderImage src={'https://raderain.sirv.com/placholders/play_icon.png'} />
  }
}