import React from 'react'
import PropTypes from 'prop-types'
import { getTokensPropType } from '../utils/props/tokens'
import { variantProp } from '../utils/props/variantProp'
import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
import { LinkBase } from './LinkBase'
import { iconComponentPropTypes } from '../Icon/Icon'
import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
import { selectSystemProps } from '../utils/props/selectSystemProps'
import { a11yProps } from '../utils/props/a11yProps'
import { linkProps as linkPropTypes } from '../utils/props/linkProps'
import { viewProps } from '../utils/props/viewProps'
import { contentfulProps } from '../utils/props/contentfulProps'

// eslint-disable-next-line no-unused-vars
const [_, selectedSystemPropTypes] = selectSystemProps([
  a11yProps,
  linkPropTypes,
  viewProps,
  contentfulProps
])

export const Link = React.forwardRef(
  (
    { href, children, accessibilityRole = 'link', variant = {}, tokens, dataSet, ...linkProps },
    ref
  ) => {
    const getTokens = useThemeTokensCallback('Link', tokens, variant)
    return (
      <LinkBase
        href={href}
        accessibilityRole={accessibilityRole}
        tokens={getTokens}
        ref={ref}
        dataSet={dataSet}
        {...linkProps}
      >
        {children}
      </LinkBase>
    )
  }
)
Link.displayName = 'Link'

Link.propTypes = {
  ...selectedSystemPropTypes,
  tokens: getTokensPropType('Link'),
  /**
   * href for the Link
   */
  href: PropTypes.string,
  /**
   * AccessibilityRole for the link base
   */
  accessibilityRole: PropTypes.string,
  /**
   * Children nodes that can be added
   */
  variant: variantProp.propType,
  /**
   * Optional variant that may be passed down to the link's icon if there is one
   */
  iconProps: PropTypes.exact(iconComponentPropTypes),
  /**
   * A function component for an SVG icon to render inside the link. Inherits size and color from
   * the link and any Typography the link is nested inside.
   */
  icon: PropTypes.elementType,
  /**
   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
   */
  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
  /**
   * On Web if href is passed, React Native Web maps this object's props to
   * `rel`, `target` and `download` attrs.
   */
  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
  /**
   * The dataSet prop allows to pass data-* attributes element to the component.
   */
  dataSet: PropTypes.object,
  /**
   * When true, the link is non-interactive: it renders no navigable href and cannot be
   * focused or pressed.
   */
  disabled: PropTypes.bool
}