import PropTypes from 'prop-types';
import classNames from 'classnames';
import { ExclamationIcon } from '@heroicons/react/outline';
import { CheckIcon, XIcon } from '@heroicons/react/solid';
import Button from '../shared/buttons/button';

function Option(props) {
  const { option, isAnyOptionSelected, isSelectedOption } = props;
  const color =
    isAnyOptionSelected && option.isCorrect
      ? 'green'
      : isAnyOptionSelected && isSelectedOption && option.id
      ? 'red'
      : option.id
      ? 'gray'
      : 'yellow';

  return (
    <Button
      id={`option ${option.id}`}
      outline={!isAnyOptionSelected}
      color={color}
      colorWeight={300}
      borderWeight={2}
      disabled={isAnyOptionSelected}
      textColor='gray'
      textColorWeight='600'
      size='xl'
      justifyContent={option.id ? 'start' : 'between'}
      onClick={() => props.onSelect(option.id)}
      className={classNames('w-full', { [`border-2 border-${color}-300`]: isAnyOptionSelected })}
    >
      <span className={classNames('flex', { 'mx-auto': !option.id })}>
        {option.id !== 0 && (
          <span className='shrink-0 font-semibold'>{`گزینه ${props.index + 1}:`}</span>
        )}
        <span className={classNames('mx-4 text-justify', { 'font-semibold': !option.id })}>
          {option.text}
        </span>
      </span>
      {isSelectedOption &&
        (!option.id ? (
          <ExclamationIcon
            width={25}
            height={25}
            className={`shrink-0 stroke-current text-yellow-600`}
          />
        ) : option.isCorrect ? (
          <CheckIcon
            width={25}
            height={25}
            className={`shrink-0 rounded-lg
               border-2 border-green-500
               stroke-current text-green-500 ms-auto`}
          />
        ) : (
          <XIcon
            width={25}
            height={25}
            className={classNames(
              `shrink-0 rounded-lg
               border-2 border-red-500
               stroke-current text-red-500 ms-auto`
            )}
          />
        ))}
    </Button>
  );
}

Option.propTypes = {
  option: PropTypes.object.isRequired,
  index: PropTypes.number.isRequired,
  isAnyOptionSelected: PropTypes.bool.isRequired,
  isSelectedOption: PropTypes.bool.isRequired,
  onSelect: PropTypes.func.isRequired
};

export default Option;
