import { useId } from 'react';
import get from 'lodash/get';
import { formatNumber, getStateName } from "../../../../utils/election/index.js";
import cx from "../../../../utils/css/cx.js";
import ElectionIcon from "../../ElectionIcon/index.js";
import IfActive from "../../../application/IfActive/index.js";
import { useContainerBreakpointIsAtLeast } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const StateStatus = function StateStatus(props) {
  const {
    stateFips,
    condition = 'unset',
    registerChoice,
    candidates,
    evs,
    listIndex,
    liveRegionId
  } = props;
  const id = useId();
  const options = [{
    label: get(candidates, 'dem.name', 'Dem'),
    condition: 'selectedDem',
    party: 'dem'
  }, {
    label: get(candidates, 'gop.name', 'GOP'),
    condition: 'selectedGop',
    party: 'gop'
  }];
  const isSettable = ['unset', 'selectedDem', 'selectedGop'].includes(condition);
  const calledConditionNames = {
    calledDem: get(candidates, 'dem.name', 'Dem'),
    calledGop: get(candidates, 'gop.name', 'GOP')
  };
  const atLeastMd = useContainerBreakpointIsAtLeast('md');
  const atLeastXl = useContainerBreakpointIsAtLeast('xl');
  const evFormat = atLeastXl ? 'electoral votes' : 'EVs';
  const iconSize = atLeastMd ? '4' : '3';
  const getReset = option => {
    if (option.condition === 'unset') return {};
    const reset = () => registerChoice({
      stateFips,
      condition: 'unset'
    });
    return {
      onClick: reset,
      onKeyPress: e => {
        /* If pressing enter */
        if (e.charCode === 13) {
          reset();
        }
      }
    };
  };
  const fips = stateFips.slice(0, 2);
  const abbr = getStateName(fips, {
    format: 'abbr'
  });
  const name = stateFips.length === 2 ? getStateName(fips) : `${abbr}-${stateFips.slice(2)}`;
  const stateName = <span>
      {name}
      <IfActive active={!!evs}>
        {' '}
        <span className={classes.evs}>
          (
          {formatNumber(evs)}

          <IfActive active={listIndex === 0}>
            {` ${evFormat}`}
          </IfActive>
          )
        </span>
      </IfActive>
    </span>;
  if (!isSettable) {
    return <div className={cls('state', condition)}>
        <div className={cls('stateName')}>
          {stateName}
        </div>

        <div className={cls('call')}>
          {calledConditionNames[condition]}
          <IfActive active={atLeastMd}>
            {' '}
            won
            {' '}
          </IfActive>
          <ElectionIcon type="OutcomeWin" size={iconSize} />
        </div>
      </div>;
  }
  return <div className={cls('state', condition)}>
      <div>
        <div className={cls('stateName')}>
          <span className={cls('sr-only')}>
            Pick a winner for
            {' '}
          </span>
          {stateName}
        </div>
      </div>

      <div className={cls('options')}>
        {options.map(option => <div key={option.condition} className={cls('option', option.condition)}>
            <label htmlFor={`${id}-${option.condition}`}>
              {option.label}
              <input type="radio" id={`${id}-${option.condition}`} name={id} value={option.condition} checked={condition === option.condition} onChange={() => registerChoice({
            stateFips,
            party: option.party
          })} {...getReset(option)} aria-controls={liveRegionId} />
            </label>
          </div>)}
      </div>
    </div>;
};
export default StateStatus;