import PropTypes from 'prop-types';
import { useFavoriteContestToggle } from "../../../hooks/election/index.js";
import FlagIcon from './FlagIcon';
import classes from './styles.module.scss';

/**
 * This is a mapping of standard sizing levels onto actual widths to ensure
 * consistency in icon sizes throughout their uses.
 */
export const sizes = {
  2: '8px',
  3: '12px',
  4: '16px',
  5: '20px'
};

/**
 * FavoritedButton
 * This renders a flag that denotes whether a race is favorited by a user
 */
const FavoritedButton = function FavoritedButton(props) {
  const {
    id,
    size,
    noninteractive
  } = props;
  const {
    isFavorite,
    toggleFavorite
  } = useFavoriteContestToggle(id);
  if (noninteractive && !isFavorite) {
    return null;
  }
  const iconSize = sizes[size] || sizes['5'];
  return <div>
      {!noninteractive && <button className={classes['favorite-button']} onClick={toggleFavorite} type="button">
          <FlagIcon iconSize={iconSize} isFavorite={isFavorite} />
        </button>}

      {noninteractive && <span>
          <FlagIcon iconSize={iconSize} isFavorite={isFavorite} />
        </span>}

    </div>;
};
FavoritedButton.defaultProps = {
  size: '5',
  noninteractive: false
};
FavoritedButton.propTypes = {
  /**
   * The ID of the contest to print the progress of
   */
  id: PropTypes.string.isRequired,
  /**
   * The size of the icon.
   */
  size: PropTypes.oneOf(Object.keys(sizes)),
  /**
   * Can click on icon or not
   */
  noninteractive: PropTypes.bool
};
export default FavoritedButton;