import { PRIMARY_COLOR } from '../../_constants/common'
import RDoughnutChart from '../chart/RDoughnutChart'
import './boxChart.scss'

export default function BoxDoughnutChart({data = [], title, propsContainer}) {
  const [current, target] = data
  
  const chartData = (current / target === 1 || current > target) ? [current] : [current, target - current];
  
  const renderStats = () => {
    return (
      <>
        <p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
        <p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>{target > 0 ? target : '...'}</p>
      </>
    )
  }

  return (
    <div className="box-chart-container" {...propsContainer}>
      <p className='box-chart-subtitle'>{title}</p>
      <div className='d-flex flex-1'>
        <div className='doughnut-chart-content flex-1'>
          <RDoughnutChart data={chartData} />
        </div>
        <div className='origin-vertical justify-content-center align-item-center flex-1'>
          {renderStats()}
        </div>
      </div>
    </div>
  )
}