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 StyledButton = styled.button(({ color }) => ({
  background: 'none',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
  display: 'inline-flex',
  alignItems: 'stretch',
  'svg path': {
    fill: color
  }
}))

const VideoButton = ({ icon, label, disableFocus, children, tokens, variant, ...rest }) => {
  const { color } = useThemeTokens('VideoButton', tokens, variant)

  const handleOnKeyDown = (event) => {
    const key = event.key || event.keyCode

    // Disables playing by space bar, as that can be used to click a button
    if (key === ' ' || key === 32) {
      event.stopPropagation()
    }
  }
  const handleClick = (event) => {
    event.preventDefault()
    rest.onClick?.(event)
  }

  return (
    <StyledButton
      aria-label={label}
      onKeyDown={handleOnKeyDown}
      tabIndex={disableFocus ? '-1' : undefined}
      color={color}
      {...selectProps(rest)}
      onClick={handleClick}
    >
      {icon}
      {children}
    </StyledButton>
  )
}

VideoButton.propTypes = {
  ...selectedSystemPropTypes,
  icon: PropTypes.element.isRequired,
  label: PropTypes.string.isRequired,
  disableFocus: PropTypes.bool.isRequired,
  children: PropTypes.node
}

export default VideoButton