import React from 'react'
import PropTypes from 'prop-types'
import { Icon, useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
import styled from 'styled-components'
import VideoButton from '../VideoButton/VideoButton'
import videoText from '../../../videoText'
import { htmlAttrs } from '../../../../utils'

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

const VolumeSliderContainer = styled.div(({ videoPlayerWidth, compactModeThreshold, margin }) => ({
  display: 'flex',
  width: videoPlayerWidth > compactModeThreshold ? '12%' : '20%',
  maxWidth: 120,
  margin,
  alignItems: 'center'
}))

const sharedStyles = ({
  thumbHeight,
  thumbWidth,
  thumbBackground,
  trackGradientStart,
  trackGradientEnd
}) => ({
  thumb: {
    appearance: 'none',
    height: thumbHeight,
    width: thumbWidth,
    borderRadius: '50%',
    background: thumbBackground,
    cursor: 'pointer',
    marginTop: -3,

    '&:hover': {
      transform: 'scale(1.5)'
    }
  },
  track: (videoCurrentVolume) => ({
    width: '100%',
    height: 2,
    cursor: 'pointer',
    borderRadius: 1.3,
    background: `linear-gradient(to right, ${trackGradientStart} 0%, ${trackGradientEnd} ${
      videoCurrentVolume * 100 - 0.01
    }%, rgba(255,255,255,0.5) ${videoCurrentVolume * 100}%)`
  })
})

const StyledVolumeSlider = styled.input.attrs(({ videoCurrentVolume }) => ({
  value: videoCurrentVolume
}))(({ videoCurrentVolume, rangeBackground, ...sharedProps }) => {
  return {
    width: '100%',
    cursor: 'pointer',
    padding: '5px 0',

    'input[type=range]&': {
      appearance: 'none',
      width: '100%',
      background: rangeBackground
    },

    'input[type=range]&:focus': {
      outline: 'none'
    },

    'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
    'input[type=range]&::-moz-range-thumb': {
      ...sharedStyles.thumb,
      border: 'none'
    },
    'input[type=range]&::-ms-thumb': {
      ...sharedStyles.thumb,
      margin: 0,
      border: 'none'
    },

    'input[type=range]&::-webkit-slider-runnable-track':
      sharedStyles(sharedProps).track(videoCurrentVolume),
    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoCurrentVolume),
    'input[type=range]&::-ms-track': {
      ...sharedStyles(sharedProps).track(videoCurrentVolume),
      margin: '6px 0',
      border: 'none'
    },

    'input[type=range]&::-ms-fill-lower': {
      background: 'transparent'
    },
    'input[type=range]&::-ms-tooltip': {
      display: 'none'
    }
  }
})

const VolumeSlider = ({
  setVolume,
  compactModeThreshold,
  disableFocus,
  videoPlayerWidth,
  videoIsMuted,
  videoCurrentVolume,
  copy,
  toggleMute,
  resetInactivityTimer,
  tokens,
  variant,
  ...rest
}) => {
  const refVolumeSlider = React.useRef()

  const {
    marginLeft,
    marginRight,
    thumbHeight,
    thumbWidth,
    thumbBackground,
    trackGradientStart,
    trackGradientEnd,
    rangeBackground,
    mutedIcon,
    unmutedIcon
  } = useThemeTokens('VideoVolumeSlider', tokens, variant)

  const sharedProps = {
    thumbHeight,
    thumbWidth,
    thumbBackground,
    trackGradientStart,
    trackGradientEnd,
    rangeBackground
  }

  const handleVolumeChange = () => setVolume(refVolumeSlider.current.value)

  return (
    <VolumeSliderContainer
      compactModeThreshold={compactModeThreshold}
      videoPlayerWidth={videoPlayerWidth}
      margin={`0 ${marginRight}px 0 ${marginLeft}px`}
      {...selectProps(rest)}
    >
      <VideoButton
        icon={videoIsMuted ? <Icon icon={mutedIcon} /> : <Icon icon={unmutedIcon} />}
        label={videoIsMuted ? videoText[copy].unmute : videoText[copy].mute}
        disableFocus={disableFocus}
        onClick={toggleMute}
        onFocus={resetInactivityTimer}
      />
      <StyledVolumeSlider
        type="range"
        min="0"
        max="1"
        step="any"
        value={videoCurrentVolume}
        videoCurrentVolume={videoCurrentVolume}
        ref={refVolumeSlider}
        onChange={handleVolumeChange}
        onFocus={resetInactivityTimer}
        tabIndex="-1"
        aria-label={videoText[copy].volumeSliderLabel}
        {...sharedProps}
      />
    </VolumeSliderContainer>
  )
}

VolumeSlider.propTypes = {
  ...selectedSystemPropTypes,
  videoCurrentVolume: PropTypes.number.isRequired,
  setVolume: PropTypes.func.isRequired,
  videoIsMuted: PropTypes.bool.isRequired,
  toggleMute: PropTypes.func.isRequired,
  resetInactivityTimer: PropTypes.func.isRequired,
  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
  compactModeThreshold: PropTypes.number.isRequired,
  videoPlayerWidth: PropTypes.number.isRequired,
  disableFocus: PropTypes.bool.isRequired
}

export default VolumeSlider