import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from 'react';
import clsx from 'clsx';
import { addUnit } from '../utils';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const Progress = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('progress', prefixCls);
  const background = useMemo(() => props.inactive ? '#cacaca' : props.color, [props.inactive, props.color]);

  const renderPivot = () => {
    const {
      textColor,
      pivotText,
      pivotColor,
      percentage
    } = props;
    const text = pivotText !== null && pivotText !== void 0 ? pivotText : `${percentage}%`;

    if (props.showPivot && text) {
      const style = {
        color: textColor,
        left: `${+percentage}%`,
        transform: `translate(-${+percentage}%,-50%)`,
        background: pivotColor || background
      };
      return _jsx("span", Object.assign({
        style: style,
        className: clsx(bem('pivot'))
      }, {
        children: text
      }));
    }

    return null;
  };

  const {
    trackColor,
    percentage,
    strokeWidth
  } = props;
  const rootStyle = {
    background: trackColor,
    height: addUnit(strokeWidth)
  };
  const portionStyle = {
    background,
    transform: `scaleX(${+percentage / 100})`
  };
  return _jsxs("div", Object.assign({
    className: clsx(bem()),
    style: rootStyle
  }, {
    children: [_jsx("span", {
      className: clsx(bem('portion')),
      style: portionStyle
    }), renderPivot()]
  }));
};

Progress.defaultProps = {
  showPivot: true,
  percentage: 0
};
export default Progress;