import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getStateName } from "../../../utils/election/index.js";
import useZoomTransform from '../hooks/useZoomTransform';
import TooltipTrigger from '../OptionalTooltip';
import Title from './Title';
import Special from './Special';
import styles from './styles.module.scss';

/**
 * Component to render icons for special elections outside of a regular
 * state-level map
 */
const SpecialElections = function SpecialElections(props) {
  const {
    states,
    labelStyle,
    tooltip,
    customClasses,
    position
  } = props;
  const {
    zoomLevel
  } = useZoomTransform();
  const {
    specialShapeClass,
    specialShapeClassesByCode = {},
    specialLabelClass,
    specialLabelClassesByCode = {},
    specialTitleClass
  } = customClasses;
  if (states.length < 1) return null;
  const sizes = {
    geo: {
      width: 40,
      gap: 4
    },
    carto: {
      width: 66,
      gap: 4
    }
  };
  const {
    width,
    gap
  } = sizes[position];
  const starts = {
    geo: {
      x: 640,
      y: 500 - width
    },
    carto: {
      x: 960 - states.length * (width + gap),
      y: 500 - width
    }
  };
  const start = starts[position];
  const getSpecialDimensions = i => ({
    x: start.x + i * (width + gap),
    y: start.y,
    width,
    height: width
  });
  return <g className={classnames(styles.specials, {
    [styles.invisible]: zoomLevel > 0
  })}>
      <Title states={states} start={start} width={width} gap={gap} position={position} titleClassName={classnames(specialTitleClass)} />
      {states.map(({
      code,
      boundaryProps,
      labelProps
    }, i) => <TooltipTrigger key={code} as="g" tooltip={tooltip} props={{
      code,
      special: true
    }}>
          <Special dimensions={getSpecialDimensions(i)} label={getStateName(code, {
        format: labelStyle
      })} specialClassName={classnames(styles.special, specialShapeClass, specialShapeClassesByCode[code])} labelClassName={classnames(specialLabelClass, specialLabelClassesByCode[code])} boundaryProps={boundaryProps} labelProps={labelProps} />
        </TooltipTrigger>)}
    </g>;
};
SpecialElections.defaultProps = {
  states: [],
  labelStyle: 'abbr',
  customClasses: {},
  position: 'geo',
  tooltip: undefined
};
SpecialElections.propTypes = {
  states: PropTypes.arrayOf(PropTypes.shape({
    code: PropTypes.string,
    boundaryProps: PropTypes.shape({}),
    labelProps: PropTypes.shape({})
  })),
  labelStyle: PropTypes.oneOf(['ap_abbr', 'abbr']),
  tooltip: PropTypes.shape({}),
  customClasses: PropTypes.shape({
    specialShapeClass: PropTypes.string,
    specialShapeClassesByCode: PropTypes.shape({}),
    specialLabelClass: PropTypes.string,
    specialLabelClassesByCode: PropTypes.shape({}),
    specialTitleClass: PropTypes.string
  }),
  position: PropTypes.oneOf(['geo', 'carto'])
};
export default SpecialElections;