import PropTypes from 'prop-types';
import ModuleTitle from "../ModuleTitle/index.js";
import { useId } from 'react';
import PathsBar from './PathsBar';
import StateStatus from './StateStatus';
import usePaths from './usePaths';
import useHeadline from './useHeadline';
import classes from './styles.module.scss';
import Description from './Description';
const WaysToWin = function WaysToWin(props) {
  const {
    headline,
    eyebrow,
    description,
    collectionId,
    stateConfigurations,
    candidates
  } = props;
  const {
    userPaths,
    canonicalTotals,
    userTotals,
    settableStates,
    stateConditions,
    registerChoice,
    stateEvs
  } = usePaths({
    collectionId,
    stateConfigurations
  });
  const autoheadline = useHeadline({
    candidates,
    canonicalTotals
  });
  const numStateRows = Math.ceil(settableStates.length / 2);
  const liveRegionId = useId();
  return <div>
      <ModuleTitle headline={headline || autoheadline} eyebrow={eyebrow} description={description} />
      <PathsBar userPaths={userPaths} candidates={candidates} userTotals={userTotals} liveRegionId={liveRegionId} />
      <Description />
      <div className={classes.states} style={{
      '--rows': numStateRows
    }}>
        {settableStates.map((stateFips, idx) => <StateStatus key={stateFips} stateFips={stateFips} condition={stateConditions[stateFips]} candidates={candidates} evs={stateEvs[stateFips]} registerChoice={registerChoice} listIndex={idx} />)}
      </div>
    </div>;
};
WaysToWin.defaultProps = {
  headline: undefined,
  eyebrow: undefined,
  description: undefined,
  stateConfigurations: {},
  candidates: {}
};
WaysToWin.propTypes = {
  headline: PropTypes.string,
  eyebrow: PropTypes.shape({}),
  description: PropTypes.string,
  collectionId: PropTypes.string.isRequired,
  stateConfigurations: PropTypes.shape({}),
  candidates: PropTypes.shape({
    dem: PropTypes.shape({
      id: PropTypes.string,
      name: PropTypes.string
    }),
    gop: PropTypes.shape({
      id: PropTypes.string,
      name: PropTypes.string
    })
  })
};
export default WaysToWin;