import React from 'react'
import PropTypes from 'prop-types'
import { useThemeTokens } from '@telus-uds/components-base'
import styled from 'styled-components'
import { getAriaLabel, getTimestamp } from '../helpers'

const ButtonContainer = styled.button({
  background: 'none',
  border: 0,
  padding: 0,
  position: 'absolute',
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  cursor: 'pointer'
})

const ButtonContent = styled.div({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  width: 64,
  height: 64,
  background: ({ buttonContentBackground }) => buttonContentBackground ?? 'none',
  borderRadius: '100%',
  transition: 'background 0.2s ease-in-out',
  [`${ButtonContainer}:hover &`]: {
    background: ({ buttonContentChildrenBackground }) => buttonContentChildrenBackground
  }
})

const SplashButton = ({ copy, tokens, variant, videoLength }) => {
  const { buttonContentChildrenBackground } = useThemeTokens('SplashButton', tokens, variant, {
    hover: true
  })
  const {
    playIcon: PlayIcon,
    playIconColor,
    ...themeTokens
  } = useThemeTokens('SplashButton', tokens, variant)
  const ariaLabel = getAriaLabel(getTimestamp(videoLength), copy)

  return (
    <ButtonContainer aria-label={ariaLabel}>
      <ButtonContent
        {...themeTokens}
        buttonContentChildrenBackground={buttonContentChildrenBackground}
      >
        <PlayIcon size={27} color={playIconColor} />
      </ButtonContent>
    </ButtonContainer>
  )
}

SplashButton.propTypes = {
  videoLength: PropTypes.number,
  tokens: PropTypes.object,
  variant: PropTypes.object,
  copy: PropTypes.oneOf(['en', 'fr'])
}

export default SplashButton