import { ProgressProps } from '@easyv/antd/lib/progress';
import { Progress } from '@easyv/antd';
import React from 'react';
import styles from './style.less';
import classNames from 'classnames';

type StatusMsg = Partial<Record<NonNullable<ProgressProps['status']>, string | React.ReactNode>>;

interface Props extends ProgressProps {
  statusMsg?: StatusMsg;
  title?: string | React.ReactNode;
}

const EasyvProgress = (props: Props) => {
  const {
    className,
    statusMsg,
    title = '',
    type = 'line',
    strokeWidth = 4,
    trailColor = '#3D404C',
    status = 'normal',
    showInfo = false,
    ...otherProps
  } = props;
  return (
    <div className={classNames(styles.exportContainer, className)}>
      <div className={styles.progressInfo}>
        <div
          title={typeof title === 'string' ? title : ''}
          className={classNames({
            [styles.active]: status === 'active',
            [styles.exception]: status === 'exception',
            [styles.normal]: status === 'normal',
            [styles.success]: status === 'success'
          })}>
          {title}
        </div>
        {statusMsg?.[status]}
      </div>
      <Progress {...otherProps} type={type} status={status} strokeWidth={strokeWidth} showInfo={showInfo} trailColor={trailColor} />
    </div>
  );
};

export default EasyvProgress;
