import PropTypes from 'prop-types';
import { useContestCollectionMetadata, useContestCollectionHasIncumbent } from "../../../hooks/election/index.js";
import { IfActive } from "../../application/index.js";
import { Ad } from "../../brand/index.js";
import useAdSections from './useAdSections';
import classes from './styles.module.scss';
import Table from './Table';

/**
 * This module shows election results for any number of state house
 * districts, collapsing once we have a winner to save some space.
 */
const StateHouseResults = function StateHouseResults(props) {
  const {
    collectionId,
    notes,
    stateFips,
    layout
  } = props;
  const collectionMetadata = useContestCollectionMetadata(collectionId);
  const hasIncumbent = useContestCollectionHasIncumbent(collectionId);
  const adSections = useAdSections(collectionMetadata, notes);
  if (!collectionMetadata) {
    return null;
  }
  const isAllParty = layout === 'all-party';
  return <div className={classes.container}>
      {adSections.map((section, idx) => <div className={classes.container} key={section.id}>
              <div className={classes.card}>
                <Table districts={section.group} stateFips={stateFips} isAllParty={isAllParty} hasIncumbent={hasIncumbent} />
              </div>
              <IfActive active={idx !== adSections.length - 1}>
                <div className={classes.adContainer}>
                  <Ad type="cube" />
                </div>
              </IfActive>
            </div>)}

    </div>;
};
StateHouseResults.defaultProps = {
  notes: [],
  layout: 'all-party'
};
StateHouseResults.propTypes = {
  /**
   * The ID of the contest collection to show.
   */
  collectionId: PropTypes.string.isRequired,
  /**
   * An array of districtNumber and note configurations
   */
  notes: PropTypes.arrayOf(PropTypes.shape({
    districtNumber: PropTypes.string.isRequired,
    note: PropTypes.string.isRequired
  })),
  /**
   * The FIPS code of the state whose house results you're  showing
   */
  stateFips: PropTypes.string.isRequired,
  /**
   * Which type of contest-type-based layout the table should use. The party-primary layout option adds a third "party" column to the table.
   */
  layout: PropTypes.oneOf(['all-party', 'party-primary'])
};
export default StateHouseResults;