import React from 'react'
import PropTypes from 'prop-types'

import { getTokensPropType } from '../utils/props/tokens'
import { variantProp } from '../utils/props/variantProp'
import { withLinkRouter } from '../utils/withLinkRouter'
import { useViewport } from '../ViewportProvider/useViewport'
import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'

import { PressableListItemBase } from '../List/PressableListItemBase'
import { ButtonBase } from '../Button/ButtonBase'

/**
 * Public component exported as QuickLinksItem, for use as children of QuickLinks.
 *
 * Receives props injected by QuickLinks and renders the appropriate child component.
 */
const QuickLinksItemBase = React.forwardRef(({ tokens, variant, children, ...rest }, ref) => {
  const viewport = useViewport()
  const { list } = useThemeTokens('QuickLinks', tokens, variant, { viewport })

  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton'

  const getTokens = useThemeTokensCallback(themeName, tokens, variant)

  return list ? (
    <PressableListItemBase ref={ref} tokens={getTokens} {...rest}>
      {children}
    </PressableListItemBase>
  ) : (
    <ButtonBase ref={ref} tokens={getTokens} {...rest}>
      {children}
    </ButtonBase>
  )
})

QuickLinksItemBase.displayName = 'QuickLinksItem'

QuickLinksItemBase.propTypes = {
  ...withLinkRouter.propTypes,
  ...PressableListItemBase.propTypes,
  ...ButtonBase.propTypes,
  tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),
  variant: variantProp.propType,
  /**
   * Text content of the item.
   */
  children: PropTypes.node
}

// Export unwrapped component for react-docgen to extract info for docsite
export { QuickLinksItemBase }

export const QuickLinksItem = withLinkRouter(QuickLinksItemBase)