import PropTypes from 'prop-types';
import classnames from 'classnames';
import IfActive from "../../../application/IfActive/index.js";
import useZoomContext from '../../hooks/useZoomContext';
import styles from './styles.module.scss';
const Title = function Title(props) {
  const {
    start,
    width,
    gap,
    states,
    position,
    titleClassName
  } = props;
  const {
    canvas
  } = useZoomContext();
  const labelScale = `scale(${1 / canvas.svgToPixelScale})`;
  const label = position === 'carto' && canvas.nodeWidth < 750 ? 'Specials' : 'Special elections';
  const coords = {
    geo: {
      x: start.x,
      y: start.y + width
    },
    carto: {
      x: start.x + states.length * (width + gap) / 2 - gap,
      y: start.y
    }
  };
  const {
    x,
    y
  } = coords[position];
  return <g transform={`translate(${x} ${y}) ${labelScale}`} className={classnames(styles.title, styles[position], titleClassName)}>
      <text x="0" y="-8">
        <IfActive active={position === 'geo'}>
          <tspan x="-60" dy="-1.2em">
            Special
          </tspan>
          <tspan x="-60" dy="1.2em">
            elections
          </tspan>
        </IfActive>
        <IfActive active={position === 'carto'}>
          {label}
        </IfActive>
      </text>
    </g>;
};
Title.defaultProps = {
  position: 'geo',
  states: [],
  titleClassName: null
};
Title.propTypes = {
  position: PropTypes.oneOf(['geo', 'carto']),
  start: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number
  }).isRequired,
  width: PropTypes.number.isRequired,
  gap: PropTypes.number.isRequired,
  states: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string,
    code: PropTypes.string
  })),
  titleClassName: PropTypes.string
};
export default Title;