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

/**
 * SVG content component to render a single state at the county level.
 */
const StateCounties = function StateCounties(props) {
  const {
    tooltip,
    stateFips,
    customClasses,
    getBoundaryProps,
    sortBoundariesCompare
  } = props;
  const {
    countyShapeClass,
    countyShapeClassesByCode = {},
    contextShapeClass,
    cityLabelClass,
    cityMarkerClass
  } = customClasses;
  const state = countyShapes[`stateCounties${stateFips}`];
  const {
    counties: countiesTopo,
    cities,
    context
  } = useTopojson(state, {
    objects: ['counties', 'cities', 'context']
  });
  const boundaryProps = useBoundaryProps({
    getProps: getBoundaryProps,
    defaults: defaultBoundaryProps
  });
  const features = useSortedBoundaries(countiesTopo.features, sortBoundariesCompare);
  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>
        {features.map(({
        properties
      }) => <TooltipTrigger key={properties.code} as="g" tooltip={tooltip} props={properties}>
            <path className={classnames(countyShapeClass, countyShapeClassesByCode[properties.code])} d={properties.d} {...boundaryProps(properties)} />
          </TooltipTrigger>)}
      </g>
      <g>
        {cities.features.map(({
        geometry: {
          coordinates
        },
        properties
      }, i) => <City key={properties.slug} coordinates={coordinates} labelClass={cityLabelClass} markerClass={cityMarkerClass} index={i} {...properties} />)}
      </g>
    </>;
};
StateCounties.defaultProps = {
  counties: [],
  customClasses: {},
  tooltip: undefined,
  getBoundaryProps: undefined,
  sortBoundariesCompare: undefined
};
StateCounties.propTypes = {
  /**
   * The FIPS code of the state you want to render
   */
  stateFips: PropTypes.string.isRequired,
  /**
   * An array of pairs of county codes and color names
   */
  counties: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string,
    code: PropTypes.string
  })),
  /**
   * A tooltip object
   */
  tooltip: PropTypes.shape({}),
  /**
   * Custom CSS classes to style the map
   */
  customClasses: PropTypes.shape({
    countyShapeClass: PropTypes.string,
    countyShapeClassesByCode: PropTypes.shape({}),
    contextShapeClass: PropTypes.string,
    cityLabelClass: PropTypes.string,
    cityMarkerClass: PropTypes.string
  }),
  /**
   * Function to construct props for a specific boundary
   */
  getBoundaryProps: PropTypes.func,
  /**
   * Function to sort the order in which the counties are drawn. This function
   * is invoked as a sorting comparator, which receives the properties of two
   * county boundaries and should return -1, 0 or 1 depending on the order in
   * which the two should be relatively sorted.
   */
  sortBoundariesCompare: PropTypes.func
};
export default StateCounties;