import React from 'react'
import PropTypes from 'prop-types'
import {
  getTokensPropType,
  ProgressBar as ProgressBarBase,
  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 Gradient = styled.div(({ $gradient: { angle, stops, type }, $borderRadius, $shadow }) => ({
  height: '100%',
  width: '100%',
  background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
  borderRadius: $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.
 *
 */

export 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
            data-testid="ProgressBar-Gradient"
            $gradient={themeTokens.gradient}
            $borderRadius={themeTokens.borderRadius}
            $shadow={themeTokens.shadow}
          />
        )}
      </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
  })
}