import React from 'react';
import './ProgressVariants.css';

const R = 42;
const CIRC = 2 * Math.PI * R;
const COLORS = { success: '#52C41A', warning: '#FA8C16', error: '#F5222D', normal: '#2F54EB' };

export default function ProgressVariants({ type = 'line', percent = 0, status = 'normal', showInfo = true }) {
  const color = COLORS[status] || COLORS.normal;
  if (type === 'line') {
    return (
      <div className={'aa-progress is-' + status}>
        <div className="aa-progress-line-wrap">
          <div className="aa-progress-line"><div className="aa-progress-line-fill" style={{ width: percent + '%' }} /></div>
          {showInfo ? <span className="aa-progress-text">{status === 'success' ? '完成' : percent + '%'}</span> : null}
        </div>
      </div>
    );
  }
  const isDash = type === 'dashboard';
  const arcLen = isDash ? CIRC * 0.75 : CIRC;
  return (
    <div className={'aa-progress-circle' + (status !== 'normal' ? ' is-' + status : '')}>
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r={R} fill="none" stroke="#E8ECF1" strokeWidth="8"
                strokeDasharray={CIRC} strokeDashoffset={isDash ? CIRC * 0.25 : 0} />
        <circle cx="50" cy="50" r={R} fill="none" stroke={color} strokeWidth="8" strokeLinecap="round"
                strokeDasharray={arcLen} strokeDashoffset={arcLen * (1 - percent / 100)}
                transform={isDash ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'} />
      </svg>
      {showInfo ? <span className="aa-progress-circle-text">{percent}%</span> : null}
    </div>
  );
}