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

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

const StyledMiddleControlButton = styled.button(({ isHidden, width, height, background }) => ({
  width,
  height,
  borderRadius: '50%',
  transition: 'opacity 0.4s',
  opacity: isHidden ? 0 : 1,
  background,
  display: 'flex',
  justifyContent: 'center',
  border: 'none',
  padding: 0,
  font: 'inherit',
  cursor: 'pointer',
  alignItems: 'center'
}))

const MiddleControlButton = ({
  icon: Icon,
  isHidden = false,
  onClick,
  onFocus,
  tokens,
  variant,
  ...rest
}) => {
  const { width, height, background, iconColor } = useThemeTokens(
    'VideoMiddleControlButton',
    tokens,
    variant
  )

  return (
    <StyledMiddleControlButton
      isHidden={isHidden}
      onClick={onClick}
      onFocus={onFocus}
      width={width}
      height={height}
      background={background}
      {...selectProps(rest)}
    >
      <Icon color={iconColor} size={24} />
    </StyledMiddleControlButton>
  )
}

MiddleControlButton.propTypes = {
  ...selectedSystemPropTypes,
  icon: PropTypes.elementType.isRequired,
  isHidden: PropTypes.bool,
  onClick: PropTypes.func,
  onFocus: PropTypes.func
}

export default MiddleControlButton