import { useId } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getStateName } from "../../../utils/election/index.js";
import getColor from "../../../utils/colors/getColor.js";
import useBoundaryProps from '../hooks/useBoundaryProps';
import useTopojson from '../hooks/useTopojson';
import City from '../City';
import ContextGeography from '../ContextGeography';
import TooltipTrigger from '../OptionalTooltip';
import * as districtShapes from './districts';
import styles from './styles.module.scss';
import ActiveGeo from '../ActiveGeo';
const defaultBoundaryProps = {
  fill: 'white',
  stroke: getColor('warmgray-30')
};

/**
 * SVG content component to render a single state at the congressional district
 * level.
 */
const StateDistricts = function StateDistricts(props) {
  const {
    stateFips,
    tooltip,
    customClasses,
    getBoundaryProps
  } = props;
  const mapId = useId();
  const {
    districtShapeClass,
    districtShapeClassesByCode = {},
    contextShapeClass,
    cityLabelClass,
    cityMarkerClass
  } = customClasses;
  const state = districtShapes[`stateDistricts${stateFips}`];
  const {
    districts: districtsTopo,
    cities,
    context
  } = useTopojson(state, {
    objects: ['districts', 'cities', 'context']
  });
  const boundaryProps = useBoundaryProps({
    getProps: getBoundaryProps,
    defaults: defaultBoundaryProps
  });
  return <>
      <rect className={styles['background-rect']} width="100%" height="100%" />
      <g>
        {context.features.map(({
        properties: {
          code,
          d,
          center
        }
      }) => <ContextGeography key={code} className={contextShapeClass} d={d} center={center} label={getStateName(code, {
        format: 'ap_abbr'
      })} />)}
      </g>
      <g>
        {districtsTopo.features.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>)}
      </g>
      <ActiveGeo tooltip={tooltip} mapId={mapId} />
      <g>
        {cities.features.map(({
        geometry: {
          coordinates
        },
        properties
      }) => <City key={properties.slug} coordinates={coordinates} labelClass={cityLabelClass} markerClass={cityMarkerClass} {...properties} />)}
      </g>
    </>;
};
StateDistricts.defaultProps = {
  customClasses: {},
  tooltip: undefined,
  getBoundaryProps: undefined
};
StateDistricts.propTypes = {
  /**
   * The FIPS code of the state you want to render
   */
  stateFips: PropTypes.string.isRequired,
  /**
   * A tooltip object
   */
  tooltip: PropTypes.shape({}),
  /**
   * Custom CSS classes to style the map
   */
  customClasses: PropTypes.shape({
    districtShapeClass: PropTypes.string,
    districtShapeClassesByCode: PropTypes.shape({}),
    contextShapeClass: PropTypes.string,
    cityLabelClass: PropTypes.string,
    cityMarkerClass: PropTypes.string
  }),
  /**
   * Function to build props for a specific district
   */
  getBoundaryProps: PropTypes.func
};
export default StateDistricts;