import { useMemo } from 'react';
import cx from "../../../../../utils/css/cx.js";
import valueToLabel from '../valueToLabel';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const SingleStateLabels = function SingleStateLabels(props) {
  const {
    scales,
    area,
    sizes,
    isXXS,
    chartId,
    fips,
    year,
    value
  } = props;
  const {
    x,
    yInner
  } = scales;
  const [labelPartyAbbr, labelValue, labelParty] = valueToLabel(value, 1);
  const [xPos, textOffset, textAnchor] = useMemo(() => {
    const xPosI = x(value);
    const position = xPosI > area.width / 2 ? 'left' : 'right';
    const textAnchorI = position === 'left' ? 'end' : 'start';
    let textOffsetI = sizes.pointWidth / 1.5;
    if (position === 'left') {
      textOffsetI *= -1;
    }
    return [xPosI, textOffsetI, textAnchorI];
  }, [x, area, sizes, value]);
  return <text id={`${chartId}-${fips}-${year}-label`} className={cls('label', labelParty, {
    smaller: isXXS
  })} key={year} x={xPos + textOffset} y={yInner(year) + 1} textAnchor={textAnchor} dominantBaseline="central">
      {labelPartyAbbr + labelValue}
    </text>;
};
export default SingleStateLabels;