import React from 'react'
import PropTypes from 'prop-types'
import { ButtonBase } from './ButtonBase'
import { buttonPropTypes, textAndA11yText } from './propTypes'
import { a11yProps } from '../utils/props/a11yProps'
import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
import { linkProps } from '../utils/props/linkProps'
import { contentfulProps } from '../utils/props/contentfulProps'
import { useButtonTokensCallback } from './useButtonTokensCallback'

/**
 * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
 * ButtonLink is a block-level component and should not be used inline.
 */
export const ButtonLink = React.forwardRef(
  ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
    const getTokens = useButtonTokensCallback('Button', tokens, variant)

    return (
      <ButtonBase
        ref={ref}
        accessibilityRole={accessibilityRole}
        tokens={getTokens}
        hrefAttrs={hrefAttrs}
        dataSet={dataSet}
        {...rest}
      />
    )
  }
)
ButtonLink.displayName = 'ButtonLink'

ButtonLink.propTypes = {
  ...a11yProps.types,
  ...buttonPropTypes,
  ...linkProps.types,
  ...contentfulProps.types,
  children: textAndA11yText,
  /**
   * Data attributes applied to the rendered element. On web these become `data-*` attributes.
   */
  dataSet: PropTypes.object,
  accessibilityRole: PropTypes.string
}