import { useId } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import getColor from "../../../../utils/colors/getColor.js";
import { getStateName } from "../../../../utils/election/index.js";
import IfActive from "../../../application/IfActive/index.js";
import ActiveGeo from "../../ActiveGeo/index.js";
import useBoundaryProps from '../../hooks/useBoundaryProps';
import TooltipTrigger from '../../OptionalTooltip';
import StateLabel from '../../StateLabel';
import styles from './styles.module.scss';
const defaultBoundaryProps = {
  fill: 'white',
  stroke: getColor('warmgray-30')
};
const defaultLabelProps = {
  fill: getColor('warmgray-100'),
  stroke: 'white',
  strokeOpacity: 1,
  fontWeight: 'bold'
};
const DistrictChoropleth = function DistrictChoropleth(props) {
  const {
    districts,
    states,
    labelStyle,
    tooltip,
    customClasses,
    getBoundaryProps
  } = props;
  const mapId = useId();
  const {
    districtShapeClass,
    districtShapeClassesByCode = {},
    stateShapeClass,
    stateLabelClass,
    stateLabelLeaderLineClass
  } = customClasses;
  const boundaryProps = useBoundaryProps({
    getProps: getBoundaryProps,
    defaults: defaultBoundaryProps
  });
  return <g>
      {districts.map(({
      properties
    }) => <TooltipTrigger key={properties.code} as="g" tooltip={tooltip} props={{
      ...properties,
      mapId
    }}>
          <path className={classnames(districtShapeClass, districtShapeClassesByCode[properties.code])} d={properties.d} {...boundaryProps(properties)} />
        </TooltipTrigger>)}
      {states.map(({
      properties
    }) => <path key={properties.code} className={classnames(styles.state, stateShapeClass)} d={properties.d} />)}
      <ActiveGeo tooltip={tooltip} mapId={mapId} />
      <IfActive active={!!labelStyle}>
        {states.map(({
        properties: {
          code,
          center,
          labelOffset,
          labelLimits
        }
      }) => <StateLabel key={code} center={center} labelOffset={labelOffset} labelLimits={labelLimits} label={getStateName(code, {
        format: labelStyle
      })} className={stateLabelClass} leaderLineClassName={stateLabelLeaderLineClass} {...defaultLabelProps} />)}
      </IfActive>

    </g>;
};
DistrictChoropleth.defaultProps = {
  districtColorByCode: new Map(),
  labelStyle: undefined,
  tooltip: undefined,
  states: [],
  customClasses: {},
  getBoundaryProps: undefined
};
DistrictChoropleth.propTypes = {
  districts: PropTypes.arrayOf(PropTypes.shape({
    properties: PropTypes.shape({
      code: PropTypes.string,
      d: PropTypes.string
    })
  })).isRequired,
  states: PropTypes.arrayOf(PropTypes.shape({
    properties: PropTypes.shape({
      code: PropTypes.string,
      d: PropTypes.string
    })
  })),
  districtColorByCode: PropTypes.instanceOf(Map),
  labelStyle: PropTypes.oneOf(['ap_abbr', 'abbr']),
  tooltip: PropTypes.shape({}),
  customClasses: PropTypes.shape({
    districtShapeClass: PropTypes.string,
    districtShapeClassesByCode: PropTypes.shape({}),
    stateShapeClass: PropTypes.string,
    stateLabelClass: PropTypes.string,
    stateLabelLeaderLineClass: PropTypes.string
  }),
  getBoundaryProps: PropTypes.func
};
export default DistrictChoropleth;