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: playIconContainerBackground
})
const selectDetailsContainerTokens = ({ detailsContainerPadding }) => ({
  $detailsContainerPadding: detailsContainerPadding
})
const selectButtonContentTokens = ({
  buttonBackground,
  buttonBorderColor,
  buttonRadius,
  buttonLeftPosition,
  buttonBottomPosition,
  buttonMinHeight,
  buttonPaddingLeft,
  buttonPaddingRight
}) => ({
  $buttonBackground: buttonBackground,
  $buttonBorderColor: buttonBorderColor,
  $buttonRadius: buttonRadius,
  $buttonLeftPosition: buttonLeftPosition,
  $buttonBottomPosition: buttonBottomPosition,
  $buttonMinHeight: buttonMinHeight,
  $buttonPaddingLeft: buttonPaddingLeft,
  $buttonPaddingRight: buttonPaddingRight
})

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

export 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>
          {Number.isFinite(videoLength) && videoLength > 0 && (
            <Typography
              variant={{
                color: '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'])
}