import * as React from 'react'
import { observer } from 'mobx-react'
import { Line, Circle } from 'rc-progress'
import 'rc-progress/assets/index.css'
import './progress.css'

interface IProps {
  type: 'line' | 'circle'
  percent: number
  showLabel?: boolean
  gapDegree?: number
  gapPosition?: string
  strokeWidth?: number
  strokeColor?: string
  trailWidth?: number
  trailColor?: string
  strokeLinecap?: string
  className?: string
  style?: object
}

@observer
class Progress extends React.Component<IProps, {}> {
  mq: MediaQueryList
  constructor(props: IProps) {
    super(props)
    this.mq = window.matchMedia('(max-width: 767px)')
  }
  render() {
    const { type, showLabel, percent, ...rest } = this.props
    const svgProps = Object.assign({}, this.props)
    if (type === 'line') {
      let isMobile = this.mq.matches
      let strokeWith = isMobile ? 6 : 4
      return (
        <Line
          strokeWidth={strokeWith}
          trailWidth={strokeWith}
          trailColor="#D8D8D8"
          strokeColor="#2196F3"
          {...svgProps}
        />
      )
    } else if (type === 'circle' && showLabel) {
      return (
        <div className="en-progress">
          <span className="en-progress__text">{percent}%</span>
          <Circle
            strokeWidth="13"
            trailWidth="13"
            trailColor="#CBCBCB"
            strokeColor="#00B636"
            percent={percent}
            {...rest}
          />
        </div>
      )
    } else if (type === 'circle') {
      return (
        <Circle
          strokeWidth="13"
          trailWidth="13"
          trailColor="#CBCBCB"
          strokeColor="#00B636"
          percent={percent}
          {...rest}
        />
      )
    } else {
      return null
    }
  }
}

export default Progress