import { useState } from 'react';
import PropTypes from 'prop-types';
import { IfActive, LazyMount } from "../../application/index.js";
import { Ad } from "../../brand/index.js";
import ModuleTitle from "../ModuleTitle/index.js";
import useAdSections from './useAdSections';
import District from './District';
import DistrictNav from './DistrictNav';
import classes from './styles.module.scss';

/**
 * 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,
    annotations,
    featuredDistricts,
    eyebrow,
    leaderboardProps
  } = props;
  const [activeDistrict, setActiveDistrict] = useState();
  const {
    sections,
    navDistricts
  } = useAdSections({
    collectionId,
    notes,
    annotations,
    featuredDistricts
  });
  return <div className={classes.container}>
      {sections.map((section, idx) => <LazyMount key={section.id} lazy={idx > 0} minHeight={500} className={classes.container}>
          <div className={classes.card}>
            <IfActive active={idx === 0}>
              <ModuleTitle eyebrow={eyebrow} disableBorder />
              <DistrictNav setActiveDistrict={setActiveDistrict} stateFips={navDistricts.stateFips} districtNumbers={navDistricts.districtNumbers} />
            </IfActive>

            <div className={classes.districts}>
              {section.districts.map(district => <District key={district.districtNumber} stateFips={district.stateFips} districtNumber={district.districtNumber} note={district.note} annotation={district.annotation} blocks={district.blocks} activeDistrict={activeDistrict} setActiveDistrict={setActiveDistrict} leaderboardProps={leaderboardProps} />)}
            </div>
          </div>
          <IfActive active={idx !== sections.length - 1}>
            <div className={classes.adContainer}>
              <Ad type="mrec-small_btf" />
            </div>
          </IfActive>
        </LazyMount>)}

    </div>;
};
StateHouseResults.defaultProps = {
  eyebrow: {
    isLive: true
  },
  notes: [],
  annotations: [],
  featuredDistricts: [],
  leaderboardProps: undefined
};
StateHouseResults.propTypes = {
  /**
   * The ID of the contest collection to show.
   */
  collectionId: PropTypes.string.isRequired,
  /**
   * Eyebrow configuration
   */
  eyebrow: PropTypes.shape({}),
  /**
   * Notes to include for any districts that need them
   */
  notes: PropTypes.arrayOf(PropTypes.shape({
    districtNumber: PropTypes.string.isRequired,
    party: PropTypes.string,
    note: PropTypes.string.isRequired
  })),
  /**
   * Annotations for specific districts
   */
  annotations: PropTypes.arrayOf(PropTypes.shape({
    districtNumber: PropTypes.string.isRequired,
    reporterNote: PropTypes.shape({})
  })),
  /**
   * Districts to feature in the nav, even if they're not annotated
   */
  featuredDistricts: PropTypes.arrayOf(PropTypes.string),
  /**
   * Custom props to pass to each leaderboard
   */
  leaderboardProps: PropTypes.shape({})
};
export default StateHouseResults;