import React from 'react'
import PropTypes from 'prop-types'
import { selectSystemProps, useViewport } from '@telus-uds/components-base'
import styled from 'styled-components'
import { viewports } from '@telus-uds/system-constants'
import SplashButton from './SplashButton/SplashButton'
import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails'
import videoText from '../../Video/videoText'
import { htmlAttrs } from '../../utils'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])

const SplashBackground = styled.div(({ videoPoster }) => ({
  backgroundImage: `url(${videoPoster})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  position: 'absolute',
  top: 0,
  width: '100%',
  height: '100%', // fixes vertical alignment on IE 11
  cursor: 'pointer'
}))

const VideoSplash = ({ poster, videoLength, simpleMode, copy = 'en', onClick, ...rest }) => {
  const viewport = useViewport()

  const showDetails = !simpleMode && viewport !== viewports.xs
  const label = videoText[copy].watch

  return (
    <SplashBackground {...selectProps(rest)} onClick={onClick} videoPoster={poster}>
      {showDetails ? (
        <SplashButtonWithDetails videoLength={videoLength} copy={copy} label={label} />
      ) : (
        <SplashButton videoLength={videoLength} copy={copy} />
      )}
    </SplashBackground>
  )
}

VideoSplash.propTypes = {
  ...selectedSystemPropTypes,
  onClick: PropTypes.func,
  poster: PropTypes.string,
  videoLength: PropTypes.number.isRequired,
  simpleMode: PropTypes.bool,
  copy: PropTypes.oneOf(['en', 'fr'])
}

export default VideoSplash