import PropTypes from 'prop-types';
import useCandidateMetadata from "../../../hooks/election/useCandidateMetadata/index.js";
import PartyName from '../PartyName';

/**
 * The name of a candidate's party.
 *
 * You should use this component if you have a candidate's id, and would like
 * to display that candidate's party. If you have a party id, you should use
 * the `PartyName` component, which `CandidateParty` uses under the hood.
 *
 * Note that the component will return null if you pass a candidate
 * that does not have a party assigned, as is the case with
 * ballot measure options.
 *
 * By default, this component is colored based on the party's color.
 * Check the [documentation for `PartyName`][party-name]
 * for details about color and format options.
 *
 * [party-name]: ./?path=/docs/components-election-partyname--basic
 */
const CandidateParty = function CandidateParty(props) {
  const {
    id,
    ...restProps
  } = props;
  const metadata = useCandidateMetadata(id);
  if (!metadata) return null;
  const {
    party,
    fullPartyName
  } = metadata;
  return <PartyName id={party} fullPartyName={fullPartyName} {...restProps} />;
};
CandidateParty.propTypes = {
  /**
   * The ID of the candidate whose party you want to format.
   * If the candidate does not have a party that matches
   * one of our four supported parties, the component will return null.
   */
  id: PropTypes.string.isRequired
};
export default CandidateParty;