import PropTypes from 'prop-types';
import get from 'lodash/get';
import cx from "../../../utils/css/cx.js";
import IfActive from "../../application/IfActive/index.js";
import Section from './Section';
import Label from './Label';
import classes from './styles.module.scss';
import FlipCard from './FlipCard';
const cls = cx.merge(classes);
const sections = ['seatedDem', 'calledDem', 'notCalledLeft', 'runoff', 'calledOtherParty', 'notCalledRight', 'calledGop', 'seatedGop'];
const BalanceOfPowerBar = function BalanceOfPowerBar(props) {
  const {
    bop,
    mode,
    markCenter,
    demName,
    gopName,
    labelFormat,
    isSecondary,
    customLabel,
    height,
    borderWidth,
    hideNotUpLabels,
    disableFlips,
    noWrapLabel,
    disableFlipCount,
    otherLabel
  } = props;
  if (!bop) return null;
  const {
    seatedDem = 0,
    calledDem = 0,
    runoff = 0,
    calledOtherParty = 0,
    calledGop = 0,
    seatedGop = 0
  } = bop.bop;
  const {
    flips
  } = bop;
  const demTotal = seatedDem + calledDem;
  const gopTotal = seatedGop + calledGop;
  const total = Object.values(bop.bop).reduce((a, b) => a + (b || 0), 0);
  const pastCenter = demTotal >= total / 2 || gopTotal >= total / 2 || calledOtherParty > 0;
  const BarLabel = customLabel || Label;
  const hasFlips = flips && (flips.dem || flips.gop);
  const getKey = (section, i) => `${section}-${i}`;
  const getSectionCount = section => {
    const value = bop.bop[section] || 0;
    const centered = runoff + calledOtherParty;
    const halfCentered = centered / 2;
    const center = total / 2;
    if (section === 'notCalledLeft') {
      const max = center - demTotal - halfCentered;
      const min = total - demTotal - gopTotal - centered;
      const val = Math.max(0, Math.min(max, min));
      return mode === 'segmented' ? Math.floor(val) : val;
    }
    if (section === 'notCalledRight') {
      const max = center - gopTotal - halfCentered;
      const min = total - demTotal - gopTotal - centered;
      const val = Math.max(0, Math.min(max, min));
      return mode === 'segmented' ? Math.ceil(val) : val;
    }
    return value;
  };
  return <div className={classes.bop} style={{
    '--height': height,
    '--border-width': borderWidth
  }}>
      <div className={cls('barContainer', {
      hasFlips: hasFlips && !disableFlips
    })}>
        <div className={classes.bar}>
          {sections.map(section => <Section key={getKey(section)} section={section} count={getSectionCount(section)} total={total} mode={mode} />)}
        </div>
        <div className={cls('centerMark', {
        markCenter,
        pastCenter
      })} />
        <IfActive active={!disableFlips}>
          <FlipCard flips={flips} party="dem" disableFlipCount={disableFlipCount} />
          <FlipCard flips={flips} party="gop" disableFlipCount={disableFlipCount} />
        </IfActive>
      </div>

      <IfActive active={labelFormat !== 'none'}>
        <div className={classes.demLabel}>
          <BarLabel count={demTotal} total={total} notUp={seatedDem} bop={bop} labelFormat={labelFormat} name={demName} party="dem" isSecondary={isSecondary} hideNotUpLabels={hideNotUpLabels} isWinner={get(bop, 'winner.party') === 'dem'} noWrapLabel={noWrapLabel} />
        </div>
      </IfActive>

      <IfActive active={labelFormat !== 'none' && !!otherLabel}>
        <div className={classes.otherLabel}>
          {otherLabel}
        </div>
      </IfActive>

      <IfActive active={labelFormat !== 'none'}>
        <div className={classes.gopLabel}>
          <BarLabel count={gopTotal} total={total} notUp={seatedGop} bop={bop} labelFormat={labelFormat} name={gopName} party="gop" isSecondary={isSecondary} hideNotUpLabels={hideNotUpLabels} isWinner={get(bop, 'winner.party') === 'gop'} noWrapLabel={noWrapLabel} />
        </div>
      </IfActive>
    </div>;
};
BalanceOfPowerBar.defaultProps = {
  bop: undefined,
  mode: 'grouped',
  markCenter: false,
  demName: 'Dem',
  gopName: 'GOP',
  labelFormat: 'count',
  isSecondary: false,
  customLabel: undefined,
  height: undefined,
  borderWidth: undefined,
  hideNotUpLabels: false,
  disableFlips: false,
  noWrapLabel: false,
  disableFlipCount: false,
  otherLabel: undefined
};
BalanceOfPowerBar.propTypes = {
  bop: PropTypes.shape({
    bop: PropTypes.shape({
      seatedDem: PropTypes.number,
      calledDem: PropTypes.number,
      calledGop: PropTypes.number,
      seatedGop: PropTypes.number,
      calledOtherParty: PropTypes.number,
      runoff: PropTypes.number,
      notCalled: PropTypes.number
    }),
    flips: PropTypes.shape({
      dem: PropTypes.number,
      gop: PropTypes.number
    })
  }),
  mode: PropTypes.oneOf(['grouped', 'segmented']),
  markCenter: PropTypes.bool,
  demName: PropTypes.node,
  gopName: PropTypes.node,
  labelFormat: PropTypes.oneOf(['count', 'percent', 'none']),
  isSecondary: PropTypes.bool,
  customLabel: PropTypes.elementType,
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  hideNotUpLabels: PropTypes.bool,
  disableFlips: PropTypes.bool,
  noWrapLabel: PropTypes.bool,
  disableFlipCount: PropTypes.bool,
  otherLabel: PropTypes.node
};
export default BalanceOfPowerBar;