import PropTypes from 'prop-types';
import classnames from 'classnames';
import useMask from './_hooks/useMask';
import styles from './styles.module.scss';
const LeaderLine = function LeaderLine(props) {
  const {
    id,
    start,
    end,
    clippingRef,
    className
  } = props;
  const [x1, y1] = start;
  const [x2, y2] = end;
  const clipId = `states-label-leaderline-avoid-text-${id}`;
  const clippingRect = useMask({
    clippingRef,
    start
  });
  if (!clippingRect) return null;
  return <g>
      <mask id={clipId}>
        <rect x="0" y="0" width="100%" height="100%" fill="white" />
        <rect {...clippingRect} />
      </mask>
      <line x1={x1} y1={y1} x2={x2} y2={y2} className={classnames(styles.leaderLine, className)} mask={`url(#${clipId})`} />
    </g>;
};
LeaderLine.defaultProps = {
  clippingRef: undefined,
  className: undefined
};
LeaderLine.propTypes = {
  id: PropTypes.string.isRequired,
  start: PropTypes.arrayOf(PropTypes.number).isRequired,
  end: PropTypes.arrayOf(PropTypes.number).isRequired,
  clippingRef: PropTypes.shape({
    current: PropTypes.shape({
      getBoundingClientRect: PropTypes.func
    })
  }),
  className: PropTypes.string
};
export default LeaderLine;