import { useMemo } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import classnames from 'classnames';
import getColor from "../../../../utils/colors/getColor.js";
import { IfActive } from "../../../application/index.js";
import useBoundaryProps from '../../hooks/useBoundaryProps';
import useZoomTransform from '../../hooks/useZoomTransform';
import TooltipTrigger from '../../OptionalTooltip';
import getCircleTransform from './_utils/getCircleTransform';
import styles from './styles.module.scss';
const defaultDotProps = {
  fill: 'white',
  stroke: getColor('warmgray-100'),
  strokeWidth: 1
};
const DistrictDots = function DistrictDots(props) {
  const {
    districts: districtShapes,
    tooltip,
    customClasses,
    getBoundaryProps,
    Badge
  } = props;
  const {
    k: zoomScale,
    zoomLevel
  } = useZoomTransform();
  const dotSize = 1.2 * (5 + 8 * zoomLevel);
  const districts = useMemo(() => districtShapes.filter(({
    properties
  }) => !properties.noDot), [districtShapes]);
  const {
    districtDotClass,
    districtDotClassesByCode = {}
  } = customClasses;
  const boundaryProps = useBoundaryProps({
    getProps: getBoundaryProps,
    defaults: defaultDotProps
  });
  const activeCode = get(tooltip, 'config.props.code');
  const activeProperties = get(tooltip, 'config.props');
  const showActiveGeo = activeProperties && activeProperties.center;
  return <g>
      {districts.map(({
      properties
    }) => <TooltipTrigger key={properties.code} as="g" tooltip={tooltip} props={{
      ...properties,
      circleTransform: getCircleTransform(properties, zoomScale)
    }}>
          <circle className={classnames(districtDotClass, districtDotClassesByCode[properties.code])} transform={getCircleTransform(properties, zoomScale)} r={dotSize} {...boundaryProps(properties)} />
          {!!Badge && zoomLevel >= 0.5 && <Badge dotSize={dotSize} transform={getCircleTransform(properties, zoomScale)} {...properties} />}

        </TooltipTrigger>)}
      <IfActive active={showActiveGeo}>
        <circle className={classnames(districtDotClass, styles.activeDot, {
        [styles.active]: !!activeCode
      })} transform={getCircleTransform(activeProperties, zoomScale)} r={dotSize} />
      </IfActive>
    </g>;
};
DistrictDots.defaultProps = {
  districtColorByCode: new Map(),
  tooltip: undefined,
  customClasses: {},
  getBoundaryProps: undefined,
  Badge: undefined
};
DistrictDots.propTypes = {
  districts: PropTypes.arrayOf(PropTypes.shape({
    properties: PropTypes.shape({
      code: PropTypes.string,
      d: PropTypes.string
    })
  })).isRequired,
  districtColorByCode: PropTypes.instanceOf(Map),
  tooltip: PropTypes.shape({
    config: PropTypes.shape({
      props: PropTypes.shape({
        code: PropTypes.string,
        center: PropTypes.arrayOf(PropTypes.number)
      })
    })
  }),
  customClasses: PropTypes.shape({
    districtDotClass: PropTypes.string,
    districtDotClassesByCode: PropTypes.shape({})
  }),
  getBoundaryProps: PropTypes.func,
  Badge: PropTypes.elementType
};
export default DistrictDots;