import React from 'react'
import PropTypes from 'prop-types'
import {
  getTokensPropType,
  Progress,
  selectSystemProps,
  useThemeTokens,
  a11yProps,
  viewProps,
  variantProp,
  applyShadowToken
} from '@telus-uds/components-base'
import styled from 'styled-components'

// Passes React Native-oriented system props through UDS Progress
const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])

const { Bar: ProgressBarBase } = Progress
const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
  ({ gradient: { angle, stops, type }, borderRadius, shadow }) => ({
    height: '100%',
    width: '100%',
    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
    borderRadius,
    ...applyShadowToken(shadow)
  })
)

/**
 * The `ProgressBar` is a visual representation of linear progression.
 * It provides simple but important information at a quick glance.
 * This is a  Web-specific progress bar.
 *
 * ## Component API
 *
 * Use props and tokens from the base ProgressBar component. The difference is that the
 * `gradient` is being used here to provide gradient filling.
 *
 */

const ProgressBar = React.forwardRef(({ percentage, tokens, variant, offset, ...rest }, ref) => {
  const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
  const selectedProps = selectProps(rest)

  return (
    <ProgressBarBase
      percentage={percentage}
      tokens={tokens}
      variant={variant}
      ref={ref}
      offset={offset}
      {...selectedProps}
    >
      {themeTokens.gradient && <Gradient {...themeTokens} />}
    </ProgressBarBase>
  )
})

ProgressBar.displayName = 'ProgressBar'

ProgressBar.propTypes = {
  ...selectedSystemPropTypes,
  /**
   * Percentage of completion.
   */
  percentage: PropTypes.number,
  /**
   * ProgressBar tokens.
   */
  tokens: getTokensPropType('ProgressBar'),
  /**
   * ProgressBar variant.
   */
  variant: variantProp.propType,
  /**
   * Offset position.
   */
  offset: PropTypes.shape({
    items: PropTypes.number,
    current: PropTypes.number
  })
}

export default ProgressBar