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

const IconButton = React.forwardRef(
  ({ icon = null, action, tokens = {}, variant = {}, ...iconButtonProps }, ref) => {
    const variantWithAction = action && !variant.action ? { ...variant, action } : variant
    const { icon: themeIcon } = useThemeTokens('IconButton', tokens, variantWithAction)

    return (
      // If we want the arrow icons to have directional animation instead of scale, we can pass
      // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
      // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
      <IconButtonBase
        ref={ref}
        {...iconButtonProps}
        tokens={tokens}
        variant={variant}
        icon={icon ?? themeIcon}
      />
    )
  }
)

const multiBrandIconNames = [
  'add',
  'subtract',
  'close',
  'play',
  'moveUp',
  'moveDown',
  'moveLeft',
  'moveRight',
  'expand',
  'menu',
  'cart',
  'profile'
]

IconButton.displayName = 'IconButton'
const propsWithoutIcon = ({ icon, ...props }) => props
IconButton.propTypes = {
  ...propsWithoutIcon(IconButtonBase.propTypes),
  tokens: getTokensPropType('IconButton'),
  /**
   * To set the icon to a multi-brand compatabile icon
   */
  action: PropTypes.oneOf(multiBrandIconNames),
  /**
   * To set a custom icon
   */
  icon: PropTypes.func
}

export default IconButton