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

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

/**
 * Render background full-width video
 */
const renderVideo = (item: PageBackgroundProps) => {
  const { src, shouldAutoPlay, shouldLoop } = item
  return (
    <StyledVideoPlayer
      shouldLoop={shouldLoop}
      shouldAutoPlay={shouldAutoPlay}
      src={[src]}
      muted={shouldAutoPlay}
    />
  )
}

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 }