import PropTypes from 'prop-types';
import Bar from './Bar';
import Label from './Label';
import useBopToplines from './useBopToplines';
import classes from './styles.module.scss';
const BalanceOfGovernorsBar = function BalanceOfGovernorsBar(props) {
  const {
    collectionId,
    forceSimpler,
    height
  } = props;
  const bop = useBopToplines(collectionId);
  if (!bop) {
    return null;
  }
  return <div className={classes.bop} style={{
    '--height': height
  }}>
      <div className={classes.barContainer}>
        <div className={classes.bar}>
          <Bar collectionId={collectionId} forceSimpler={forceSimpler} />
        </div>
      </div>
      <div className={classes.demLabel}>
        <Label total={bop.total} count={bop.demTotal} notUp={bop.seatedDemStates} pop={bop.demTotal} name="Dem" party="dem" forceSimpler={forceSimpler} />
      </div>

      <div className={classes.gopLabel}>
        <Label total={bop.total} count={bop.gopTotal} notUp={bop.seatedGopStates} pop={bop.gopTotal} name="GOP" party="gop" forceSimpler={forceSimpler} />
      </div>
    </div>;
};
BalanceOfGovernorsBar.defaultProps = {
  forceSimpler: false,
  height: undefined
};
BalanceOfGovernorsBar.propTypes = {
  collectionId: PropTypes.string.isRequired,
  forceSimpler: PropTypes.bool,
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};
export default BalanceOfGovernorsBar;