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

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

const ButtonContent = styled.div({
  background: ({ buttonBackground }) => buttonBackground,
  border: ({ buttonBorderColor }) => `1px solid ${buttonBorderColor}`,
  borderRadius: ({ buttonRadius }) => `${buttonRadius}px`,
  position: 'absolute',
  left: ({ buttonLeftPosition }) => `${buttonLeftPosition}px`,
  bottom: ({ buttonBottomPosition }) => `${buttonBottomPosition}px`,
  boxSizing: 'border-box',
  display: 'flex',
  alignItems: 'center',
  minHeight: ({ buttonMinHeight }) => `${buttonMinHeight}px`,
  paddingRight: ({ buttonPaddingLeft }) => `${buttonPaddingLeft}px`,
  paddingLeft: ({ buttonPaddingRight }) => `${buttonPaddingRight}px`,
  transition: 'background 0.2s ease-in-out',

  [`${ButtonContainer}:hover &`]: {
    background: ({ buttonContentChildrenBackground }) => buttonContentChildrenBackground
  }
})

const PlayIconContainer = styled.div({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  width: 32,
  height: 32,
  background: ({ playIconContainerBackground }) => playIconContainerBackground ?? 'none',
  borderRadius: '100%',
  transition: 'background 0.2s ease-in-out'
})

const DetailsContainer = styled.div({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
  paddingLeft: ({ detailsContainerPadding }) => `${detailsContainerPadding}px`
})

const selectPlayIconContainerTokens = ({ playIconContainerBackground }) => ({
  playIconContainerBackground
})
const selectDetailsContainerTokens = ({ detailsContainerPadding }) => ({ detailsContainerPadding })
const selectButtonContentTokens = ({
  buttonBackground,
  buttonBorderColor,
  buttonRadius,
  buttonLeftPosition,
  buttonBottomPosition,
  buttonMinHeight,
  buttonPaddingLeft,
  buttonPaddingRight
}) => ({
  buttonBackground,
  buttonBorderColor,
  buttonRadius,
  buttonLeftPosition,
  buttonBottomPosition,
  buttonMinHeight,
  buttonPaddingLeft,
  buttonPaddingRight
})

const getLabelTokens = ({ labelFontName: fontName, labelFontWeight: fontWeight }) => ({
  fontName,
  fontWeight
})

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

  return (
    <ButtonContainer aria-label={ariaLabel}>
      <ButtonContent
        {...selectButtonContentTokens(themeTokens)}
        buttonContentChildrenBackground={buttonContentChildrenBackground}
      >
        <PlayIconContainer {...selectPlayIconContainerTokens(themeTokens)}>
          <PlayIcon size={13} color={playIconColor} />
        </PlayIconContainer>
        <DetailsContainer {...selectDetailsContainerTokens(themeTokens)}>
          <Typography variant={{ bold: true }} tokens={getLabelTokens(themeTokens)}>
            {label}
          </Typography>
          <Typography
            variant={{
              colour: 'secondary' /* TODO: this is not the same color as in designs */,
              size: 'micro'
            }}
          >
            {mappedVideoLength.timestamp}
          </Typography>
        </DetailsContainer>
      </ButtonContent>
    </ButtonContainer>
  )
}

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

export default SplashButtonWithDetails