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';

/**
 * SVG helper content component to render a context geography for a state-level
 * map
 */
const ContextGeography = function ContextGeography(props) {
  const {
    label,
    center,
    d,
    className
  } = props;
  const {
    transform,
    canvas
  } = useZoomContext();
  const labelScale = `scale(${1 / canvas.svgToPixelScale}) scale(${1 / transform.k})`;
  const [x, y] = center || [];
  return <g>
      <path className={classnames(styles.context, className)} d={d} />
      <IfActive active={!!label && !!center}>
        <g transform={labelScale} style={{
        transformOrigin: `${x}px ${y}px`
      }}>
          <text x={x} y={y} className={classnames(styles.label)}>
            {label}
          </text>
        </g>
      </IfActive>
    </g>;
};
ContextGeography.defaultProps = {
  label: undefined,
  center: undefined,
  className: undefined
};
ContextGeography.propTypes = {
  /** Label for the geography (if any) */
  label: PropTypes.string,
  /** Where to put the label. No label is shown if `center` is falsey. */
  center: PropTypes.arrayOf(PropTypes.number),
  /** The SVG path string of the boundaries of the geography */
  d: PropTypes.string.isRequired,
  /** A custom class name to attach to the geography shape */
  className: PropTypes.string
};
export default ContextGeography;