import React from 'react'
import { fromIshToString } from 'exotic'
import { toUrlWithProtocol } from '@skava/utils'
import Empty from '@skava/ui/dist/components/atoms/Empty'
import { VideoOverlayProps } from './typings'
import {
  StyledImage,
  StyledLabel,
  StyledVideoPlayer,
  StyledForegroundWrapper,
  StyledWrapper,
} from './styled'

const defaultRenderText = (props: VideoOverlayProps) => {
  const { foregroundText } = props
  const validForegroundText = fromIshToString(foregroundText)
  return <StyledLabel content={validForegroundText} />
}

const defaultRenderImage = (props: VideoOverlayProps) => {
  const { foregroundImage } = props
  const validForegroundImage = toUrlWithProtocol(foregroundImage)
  if (validForegroundImage !== '') {
    return <StyledImage src={validForegroundImage} alt={'foreground image'} />
  }
  return <Empty />
}

const defaultRenderVideoPlayer = (props: VideoOverlayProps) => {
  const { src } = props
  const videoSrc = fromIshToString(src)
  if (videoSrc !== '') {
    const validVideoSrc = toUrlWithProtocol(videoSrc)
    return (
      <StyledVideoPlayer
        src={[validVideoSrc]}
        shouldAutoPlay={true}
        shouldLoop={true}
        muted={true}
        preload={'auto'}
        hasNativeControls={false}
        hasPlayButton={false}
        shouldShowVideoInformation={false}
      />
    )
  } else {
    return <StyledImage src={'https://raderain.sirv.com/placholders/play_icon.png'} alt={'placeholder image'} />
  }
}

function defaultRenderBox(props: VideoOverlayProps) {
  const { renderVideoPlayer, renderImage, renderText, ...remainingProps } = props
  const labelView = renderText(remainingProps)
  const imageView = renderImage(remainingProps)
  const videoPlayerView = renderVideoPlayer(remainingProps)
  return (
    <React.Fragment>
      {videoPlayerView}
      <StyledForegroundWrapper>
        {imageView}
        {labelView}
      </StyledForegroundWrapper>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: VideoOverlayProps) {
  const { className, children, dataQa } = props
  return (
    <StyledWrapper className={className} data-qa={dataQa}>
      {children}
    </StyledWrapper>
  )
}

export {
  defaultRenderImage,
  defaultRenderText,
  defaultRenderVideoPlayer,
  defaultRenderBox,
  defaultRenderWrapper
}