import React from 'react'
import { PageBackgroundProps } from './typings'
import {
  StyledVideoPlayer,
  StyledImage,
  StyledOverlay,
  StyledBox,
  StyledWrapper,
} from './styled'

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

/**
 * Render background image
 */
const renderImage = (item: PageBackgroundProps) => {
  const { backgroundImage } = item
  const backgroundImageUrl = addProtocolsWithURL(backgroundImage)
  return <StyledImage src={backgroundImageUrl} />
}

/**
 * Render background full-width video
 */
const renderVideo = (item: PageBackgroundProps) => {
  const { src } = item
  return (
    <StyledVideoPlayer
      shouldAutoPlay={true}
      src={[src]}
      muted={true}
      preload={'auto'}
      hasNativeControls={false}
      hasPlayButton={false}
      shouldShowVideoInformation={false}
    />
  )
}

function defaultRenderBox(props: PageBackgroundProps) {
  const {
    position,
    backgroundColor,
    backgroundImage,
    ...remainingProps
  } = props
  const view = props.src
    ? renderVideo(remainingProps)
    : backgroundImage
      ? renderImage({ backgroundImage, ...remainingProps })
      : '#fff'
  return (
    <StyledBox>
      {view}
      <StyledOverlay position={position} backgroundColor={backgroundColor} />
    </StyledBox>
  )
}

function defaultRenderWrapper(props: PageBackgroundProps) {
  const { className, children, isPageScroll } = props
  return (
    <StyledWrapper className={className} isPageScroll={isPageScroll}>
      {children}
    </StyledWrapper>
  )
}

export { defaultRenderBox, defaultRenderWrapper }