import { useParams } from 'react-router-dom';
import ScoreChart from './chart';
import ScoreTab from './tab';
import Fetcher from '../shared/fetches/fetcher';
import { fetchScores } from '../../redux/actions/score';

function ScoreChartContainer() {
  const { scoreType } = useParams();

  return (
    <Fetcher
      action={fetchScores.bind(null, scoreType)}
      stateSelector={state => state.scores}
      renderEmpty={() => (
        <p className='flex h-full flex-col items-center justify-center'>
          داده‌ای برای نمودار یافت نشد.
        </p>
      )}
    >
      {scores => {
        const scoreData = [];
        let j = 0;
        for (let i = scores[0].number; i <= scores[scores.length - 1].number; i++) {
          if (i === scores[j].number) {
            scoreData.push(scores[j++]);
          } else {
            scoreData.push({ number: i, score: 0 });
          }
        }
        return (
          <div className='text-center'>
            <ScoreTab />
            <p className='py-4 text-lg font-medium'>{`نمودار امتیازهای ${_[scoreType]}`}</p>
            <ScoreChart scoreType={scoreType} data={scoreData} />
          </div>
        );
      }}
    </Fetcher>
  );
}

const _ = { weekly: 'هفتگی', monthly: 'ماهانه' };

export default ScoreChartContainer;
