import { useParams } from 'react-router-dom';
import Card from './card';
import Fetcher from '../shared/fetches/fetcher';
import { fetchLastReview } from '../../redux/actions/review';
import { CORRECT_COLOR, DONT_KNOW_COLOR, WRONG_COLOR } from './utils';

function LastReviewContainer() {
  const { chapterId } = useParams();
  return (
    <Fetcher
      action={fetchLastReview.bind(null, chapterId)}
      stateSelector={state => state.lastReview}
    >
      {review => {
        const color = review.option
          ? review.status === 1
            ? CORRECT_COLOR
            : WRONG_COLOR
          : DONT_KNOW_COLOR;
        return (
          <Card
            card={review.studentCard.card}
            selectedOptionId={review.option || 0}
            color={color}
          />
        );
      }}
    </Fetcher>
  );
}

export default LastReviewContainer;
