import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { ExclamationIcon } from '@heroicons/react/outline';
import { CheckIcon, XIcon } from '@heroicons/react/solid';
import Segment from '../shared/segment';

function Reviews(props) {
  const { color, studentCard } = props;
  return (
    <Segment id='history' color={color} colorWeight={300} borderWeight={2}>
      <div className='flex flex-wrap justify-around gap-4'>
        <p>
          <span className='font-medium'>شناسه فلش کارت: </span>
          {studentCard.card}
        </p>
        {studentCard.status > 0 && (
          <p>
            <span className='font-medium'>وضعیت: </span>
            {statuses[studentCard.status]}
          </p>
        )}
        <p>
          <span className='font-medium'>مرور شماره: </span>
          {studentCard.reviewCount}
        </p>
        <div className='flex flex-wrap justify-center gap-x-2 gap-y-4'>
          <span className='font-medium'>نتایج: </span>
          <div>
            {studentCard.reviews.map(review => (
              <span key={review.id} className='px-px'>
                {!review.status ? (
                  <ExclamationIcon
                    width={25}
                    height={25}
                    className={`inline-flex shrink-0 stroke-current text-yellow-500`}
                  />
                ) : review.status === 1 ? (
                  <CheckIcon
                    width={25}
                    height={25}
                    className={`inline-flex shrink-0 rounded-lg
                       border-2 border-green-500
                       stroke-current text-green-500 ms-auto`}
                  />
                ) : (
                  <XIcon
                    width={25}
                    height={25}
                    className={classNames(
                      `inline-flex shrink-0 rounded-lg
                       border-2 border-red-500
                       stroke-current text-red-500 ms-auto`
                    )}
                  />
                )}
              </span>
            ))}
          </div>
        </div>
      </div>
    </Segment>
  );
}

const statuses = ['عادی', 'آرشیو موقت', 'آرشیو دائم'];

Reviews.propTypes = {
  studentCard: PropTypes.object.isRequired,
  color: PropTypes.string.isRequired
};

function mapStateToProps({ review }) {
  return { studentCard: review.data.studentCard };
}

export default connect(mapStateToProps)(Reviews);
