import PropTypes from 'prop-types';
import useContestMetadata from "../../../hooks/election/useContestMetadata/index.js";
import getColor from "../../../utils/colors/getColor.js";
import { getRatingName } from "../../../utils/election/index.js";

// TODO: use correct colors
const colors = {
  'lean-r': 'red-60',
  'lean-d': 'blue-60',
  'likely-r': 'red-60',
  'likely-d': 'blue-60',
  'solid-r': 'red-60',
  'solid-d': 'blue-60',
  'toss-up': 'gray-60'
};

/**
 * A contest's rating.
 *
 * This component takes a contest id and renders its election forecast rating.
 * By default the rating is colored based on our party colors, but you can
 * override this by passing a CSS color value
 * or one of our [named colors][colors] as the fg prop.
 *
 * [colors]: ./?path=/docs/styles-colors--page
 */
const ContestRating = function ContestRating(props) {
  const {
    id,
    fg = undefined
  } = props;
  const metadata = useContestMetadata(id);
  if (!metadata || !metadata.civicContestMetadata) return null;
  const {
    rating
  } = metadata.civicContestMetadata;
  const name = getRatingName(rating);
  const color = getColor(fg) || getColor(colors[rating]);
  return <span style={{
    color
  }}>
      {name}
    </span>;
};
ContestRating.propTypes = {
  /**
   * The ID of the contest whose rating you'd like to show
   */
  id: PropTypes.string.isRequired,
  /**
   * The text color. This defaults to the rating's color
   * as defined by our style guide, but you can override it
   * with a CSS color value or one of our named colors.
   */
  fg: PropTypes.string
};
export default ContestRating;