import PropTypes from 'prop-types'
import { Flex } from 'antd'
import HProgress from './HProgress'
import ElipsisText from './ElipsisText'

const ProgressDisplay = ({
  children,
  labelPosition = 'top',
  labelType,
  percent,
  status,
  showInfo,
  style
}) => {
  const label = children ? (
    <ElipsisText type={labelType} style={{ width: '100%', minWidth: 0 }}>
      {children}
    </ElipsisText>
  ) : null

  const progress = (
    <HProgress
      percent={percent}
      status={status}
      showInfo={showInfo}
      style={{ flex: 1, margin: 0 }}
    />
  )

  return (
    <Flex
      vertical
      gap={labelPosition === 'bottom' ? 2 : 10}
      style={{ width: '100%', minWidth: 0, ...style }}
    >
      {labelPosition === 'bottom' ? (
        <>
          {progress}
          {label}
        </>
      ) : (
        <>
          {label}
          {progress}
        </>
      )}
    </Flex>
  )
}

ProgressDisplay.propTypes = {
  children: PropTypes.node,
  labelPosition: PropTypes.oneOf(['top', 'bottom']),
  labelType: PropTypes.oneOf(['secondary']),
  percent: PropTypes.number,
  status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
  showInfo: PropTypes.bool,
  style: PropTypes.object
}

export default ProgressDisplay