import React from 'react'
import { VideoOverlayProps } from './typings'
import { isString } from 'exotic'
import {
  StyledImage,
  StyledLabel,
  StyledVideoPlayer,
  StyledForegroundWrapper,
  StyledWrapper,
} from './styled'

const renderLabel = (props: VideoOverlayProps) => {
  const { foregroundText } = props
  const view = isString(foregroundText) && (
    <StyledLabel content={foregroundText} />
  )
  return view
}

const renderImage = (props: VideoOverlayProps) => {
  const { foregroundImage } = props
  const view = isString(foregroundImage) && (
    <StyledImage src={foregroundImage} alt={'foreground image'} />
  )
  return view
}

function defaultRenderBox(props: VideoOverlayProps) {
  const { src, ...remainingProps } = props
  const labelView = renderLabel(remainingProps)
  const imageView = renderImage(remainingProps)
  return (
    <React.Fragment>
      <StyledVideoPlayer src={[src]} shouldAutoPlay={true} shouldLoop={true} />
      <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 { defaultRenderBox, defaultRenderWrapper }