import classnames from 'classnames';
import { useCallback, useMemo } from 'react';
import classes from './styles.module.scss';
import StateLabel from '../StateLabel';
import TopLabel from '../TopLabel';
const Bar = function Bar(props) {
  const {
    delegates,
    barScale,
    stateFips,
    activeFips,
    setActiveFips,
    idx,
    totalStates,
    resetActiveState
  } = props;
  const height = `${barScale(delegates)}%`;
  const updateActiveState = useCallback(() => setActiveFips(stateFips), [setActiveFips, stateFips]);
  const stateLabelPosition = idx >= totalStates / 2 ? 'right' : 'left';
  const [hasTopLabel, topLabelPosition] = useMemo(() => {
    const topLabel = (idx === 0 || idx === totalStates - 1) && activeFips !== stateFips;
    const position = topLabel && idx === 0 ? 'left' : 'right';
    return [topLabel, position];
  }, [totalStates, activeFips, stateFips, idx]);
  const isHighlighted = activeFips === stateFips;
  return <div className={classnames(classes.container, {
    [classes['is-highlighted']]: isHighlighted
  })}
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
  tabIndex="0" onMouseOver={updateActiveState} onFocus={updateActiveState} onBlur={resetActiveState} onMouseLeave={resetActiveState} style={{
    height
  }}>
      <div className={classes.bar} />
      <div className={classnames(classes['top-label'], {
      [classes.visible]: hasTopLabel
    })}>
        <TopLabel stateFips={stateFips} position={topLabelPosition} />
      </div>

      <div className={classnames(classes['state-label'], {
      [classes.visible]: isHighlighted
    })}>
        <StateLabel delegates={delegates} stateFips={stateFips} position={stateLabelPosition} />
      </div>

    </div>;
};
export default Bar;