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

function addProtocolsWithURL(url) {
  if (url && url.length > 0) {
    const noProtocolURL = url.replace(/(^\w+:|^)\/\//, '')
    const updatedURL = '//' + noProtocolURL
    return updatedURL
  }
  return url
}

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={addProtocolsWithURL(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}
        muted={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 }