import React from 'react'
import { fromIshToString } from 'exotic'
import { toUrlWithProtocol } from '@skava/utils'
import Empty from '@skava/ui/dist/components/atoms/Empty'
import { PageBackgroundProps } from './typings'
import {
  StyledVideoPlayer,
  BackgroundImage,
  StyledOverlay,
  StyledBox,
  StyledWrapper,
  PlaceholderImage,
} from './styled'

/**
 * Render background image
 */
const defaultRenderImage = (item: PageBackgroundProps) => {
  const { backgroundImage } = item
  const backgroundImageUrl = fromIshToString(backgroundImage)
  const validBackgroundImageUrl = toUrlWithProtocol(backgroundImageUrl)
  if (validBackgroundImageUrl) {
    return <BackgroundImage src={validBackgroundImageUrl} />
  } else {
    const placeholderImageUrl = 'https://raderain.sirv.com/placholders/image_icon.png'
    return <PlaceholderImage src={placeholderImageUrl} />
  }
}

/**
 * Render background full-width video
 */
const defaultRenderVideo = (item: PageBackgroundProps) => {
  const { src } = item
  const videoSrcURL = fromIshToString(src)
  const validVideoSrcURL = toUrlWithProtocol(videoSrcURL)
  if (validVideoSrcURL) {
    return (
      <StyledVideoPlayer
        shouldAutoPlay={true}
        src={[validVideoSrcURL]}
        muted={true}
        preload={'auto'}
        hasNativeControls={false}
        hasPlayButton={false}
        shouldShowVideoInformation={false}
      />
    )
  }
  else {
    const placeholderVideoUrl = 'https://raderain.sirv.com/placholders/play_icon.png'
    return <PlaceholderImage src={placeholderVideoUrl} />
  }
}

function defaultRenderBox(props: PageBackgroundProps) {
  const {
    mediaType,
    position,
    backgroundColor,
    renderImage,
    renderVideo,
    ...remainingProps
  } = props

  const { backgroundImage, src } = remainingProps
  const videoView = renderVideo(remainingProps)
  const imageView = renderImage(remainingProps)
  const backgroundImageUrl = fromIshToString(backgroundImage)
  const videoSrcUrl = fromIshToString(src)

  const view = (mediaType === 'image' ? imageView : ((mediaType === 'video') ? videoView : <Empty />))
  const gradientMask = <StyledOverlay position={position} backgroundColor={backgroundColor} />
  const isEmpty = ((mediaType === 'image' && backgroundImageUrl === '') || (mediaType === 'video' && videoSrcUrl === ''))
  const maskOverlay = (isEmpty ? <Empty /> : gradientMask)
  return (
    <StyledBox isEmpty={isEmpty}>
      {view}
      {maskOverlay}
    </StyledBox>
  )
}

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

export {
  defaultRenderImage,
  defaultRenderVideo,
  defaultRenderBox,
  defaultRenderWrapper
}