import { IconButton, getTokensPropType, useThemeTokensCallback } from '@telus-uds/components-base'
import React from 'react'
import PropTypes from 'prop-types'

const SideButton = React.forwardRef(
  (
    {
      isEnabled = true,
      onPress = () => {},
      onDoubleClick = () => {},
      accessibilityLabel = '',
      accessibilityDisabled = false,
      tokens = {},
      variant = {}
    },
    ref
  ) => {
    const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant)
    const getButtonTokens = ({ buttonState, disabled }) => {
      const {
        borderRadius,
        borderTopLeftRadius,
        borderTopRightRadius,
        borderBottomLeftRadius,
        borderBottomRightRadius,
        ...rest
      } = getTokens({ ...buttonState, disabled })

      return {
        ...rest,
        borderRadius,
        borderTopLeftRadius,
        borderTopRightRadius,
        borderBottomLeftRadius,
        borderBottomRightRadius,
        outerBorderRadius: borderRadius,
        outerBorderTopLeftRadius: borderTopLeftRadius,
        outerBorderTopRightRadius: borderTopRightRadius,
        outerBorderBottomLeftRadius: borderBottomLeftRadius,
        outerBorderBottomRightRadius: borderBottomRightRadius,
        outerBorderGap: 0,
        outerBorderWidth: 0
      }
    }

    return (
      <IconButton
        tokens={(buttonState) => getButtonTokens({ disabled: !isEnabled, buttonState })}
        onPress={onPress}
        onDoubleClick={onDoubleClick}
        accessibilityLabel={accessibilityLabel}
        accessibilityDisabled={accessibilityDisabled}
        ref={ref}
      />
    )
  }
)

SideButton.displayName = 'QuantitySelectorSideButton'

SideButton.propTypes = {
  isEnabled: PropTypes.bool,
  onPress: PropTypes.func,
  onDoubleClick: PropTypes.func,
  accessibilityLabel: PropTypes.string,
  accessibilityDisabled: PropTypes.bool,
  tokens: getTokensPropType('QuantitySelectorSideButton'),
  variant: PropTypes.object
}
export default SideButton