import PropTypes from 'prop-types';
import classnames from 'classnames';
import useZoomContext from '../hooks/useZoomContext';
import styles from './styles.module.scss';

/**
 * Mark a city on a single-state map
 */
const City = function City(props) {
  const {
    coordinates,
    label,
    labelPosition,
    labelClass,
    markerClass,
    mobile
  } = props;
  const {
    transform,
    canvas
  } = useZoomContext();
  const labelScale = `scale(${1 / canvas.svgToPixelScale}) scale(${1 / transform.k})`;
  const [x, y] = coordinates;
  const zoomedIn = transform.zoomLevel > 0.2;
  return <g transform={labelScale} style={{
    transformOrigin: `${coordinates[0]}px ${coordinates[1]}px`
  }} className={classnames(styles.city, {
    [styles.hidable]: !mobile && !zoomedIn
  })}>
      <circle cx={x} cy={y} r="3" className={classnames(styles.cityMarker, markerClass)} />

      <text x={x} y={y} className={classnames(styles.label, styles[labelPosition], labelClass)} aria-hidden="true">
        {label}
      </text>
      <text x={x} y={y} className={classnames(styles.labelFill, styles[labelPosition], labelClass)}>
        {label}
      </text>
    </g>;
};
City.defaultProps = {
  labelPosition: 'right',
  labelClass: undefined,
  markerClass: undefined,
  mobile: false
};
City.propTypes = {
  /** The coordinates of the city in SVG coordinate space */
  coordinates: PropTypes.arrayOf(PropTypes.number).isRequired,
  /** The name of the city */
  label: PropTypes.string.isRequired,
  /** The position to place the city label */
  labelPosition: PropTypes.oneOf(['right', 'left']),
  labelClass: PropTypes.string,
  markerClass: PropTypes.string,
  mobile: PropTypes.bool
};
export default City;