import React from 'react'
import PropTypes from 'prop-types'
import { Spinner } from './Spinner'
import { Dots } from './Dots'
import { DOTS_STYLE } from './shared'

/**
 * Return <Dots/> or <Spinner/> based on `variant?.dots`.
 * Reused in all the variants of the component.
 */
export const RenderActivityIndicator = React.forwardRef(
  (
    { variant = {}, dotSize, size, color, indicatorBackgroundColor, thickness, label, isStatic },
    ref
  ) => {
    const { dots, style } = variant || {}
    const isDots = dots === true || style === DOTS_STYLE

    return isDots ? (
      <Dots
        ref={ref}
        size={dotSize}
        color={color}
        indicatorBackgroundColor={indicatorBackgroundColor}
        label={label}
        isStatic={isStatic}
      />
    ) : (
      <Spinner
        ref={ref}
        size={size}
        color={color}
        indicatorBackgroundColor={indicatorBackgroundColor}
        thickness={thickness}
        label={label}
        isStatic={isStatic}
      />
    )
  }
)

RenderActivityIndicator.displayName = 'RenderActivityIndicator'

RenderActivityIndicator.propTypes = {
  /**
   * ActivityIndicator variants
   * */
  variant: PropTypes.shape({
    dots: PropTypes.bool,
    style: PropTypes.oneOf([DOTS_STYLE])
  }),
  /**
   * Size of the dots
   * */
  dotSize: PropTypes.number,
  /**
   * Size of the spinner
   * */
  size: PropTypes.number,
  /**
   * Primary color
   * */
  color: PropTypes.string,
  /**
   * Secondary color (background) of the indicator
   * */
  indicatorBackgroundColor: PropTypes.string,
  /**
   * Thickness of the indicator
   * */
  thickness: PropTypes.number,
  /**
   * Label for the ActivityIndicator
   * */
  label: PropTypes.string,
  /**
   * if true, there's no animation for ActivityIndicator
   * */
  isStatic: PropTypes.bool
}