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

/**
 * The name of contest, formatted as specified.
 *
 * This component takes a contest id and renders the contest's name.
 *
 * We currently support formatting for the following offices: `president`,
 * `senate`, `house`, `governor`, `question`, `stateLtGov`, `stateAttyGen`, and
 * `stateSecOfState`.
 *
 * The stories below show possible formatting options, but note that if a
 * contest has a `name` property, that will override the formatted name.
 *
 */
const ContestName = function ContestName(props) {
  const {
    id,
    format
  } = props;
  const metadata = useContestMetadata(id);
  const name = getContestName(metadata, {
    format
  });
  if (!name) return null;
  return <>
      {name}
    </>;
};
ContestName.defaultProps = {
  format: 'long'
};
ContestName.propTypes = {
  /**
   * The ID of the contest whose name you want to format.
   */
  id: PropTypes.string.isRequired,
  /**
   * The format to use.
   */
  format: PropTypes.oneOf(['tiny', 'short', 'medium', 'long', 'no-state'])
};
export default ContestName;