import PropTypes from 'prop-types';
import IfActive from "../../application/IfActive/index.js";
import useTopojson from '../hooks/useTopojson';
import districtShapes from './districts.asset.json';
import DistrictChoropleth from './DistrictChoropleth';
import DistrictBackground from './DistrictBackground';
import DistrictDots from './DistrictDots';

/**
 * SVG content component to render all congressional districts in the country.
 * It can either render districts as a choropleth of geographical district
 * boundaries or as dots.
 */
const Districts = function Districts(props) {
  const {
    tooltip,
    displayDistrictsAsDots,
    choroplethLabelStyle,
    customClasses,
    getBoundaryProps
  } = props;
  const {
    choroplethClasses,
    backgroundClasses,
    dotsClasses
  } = customClasses;
  const {
    districts: districtsTopo,
    states: statesTopo
  } = useTopojson(districtShapes, {
    objects: ['states', 'districts']
  });
  const {
    features
  } = districtsTopo;
  const {
    features: states
  } = statesTopo;
  return <g>
      <IfActive active={!displayDistrictsAsDots}>
        <DistrictChoropleth districts={features} states={states} labelStyle={choroplethLabelStyle} tooltip={tooltip} customClasses={choroplethClasses} getBoundaryProps={getBoundaryProps} />
      </IfActive>
      <IfActive active={displayDistrictsAsDots}>
        <DistrictBackground districts={features} states={states} customClasses={backgroundClasses} tooltip={tooltip} />
        <DistrictDots districts={features} tooltip={tooltip} customClasses={dotsClasses} getBoundaryProps={getBoundaryProps} />
      </IfActive>
    </g>;
};
Districts.defaultProps = {
  displayDistrictsAsDots: false,
  choroplethLabelStyle: undefined,
  customClasses: {},
  tooltip: undefined,
  getBoundaryProps: undefined
};
Districts.propTypes = {
  /**
   * A tooltip object
   */
  tooltip: PropTypes.shape({}),
  /**
   * Whether to render the dot display or a choropleth
   */
  displayDistrictsAsDots: PropTypes.bool,
  /**
   * What kind of state labels to include in the choropleth map, if any
   */
  choroplethLabelStyle: PropTypes.oneOf(['ap_abbr', 'abbr']),
  /**
   * Custom CSS classes to style the map
   */
  customClasses: PropTypes.shape({
    choroplethClasses: PropTypes.shape({}),
    backgroundClasses: PropTypes.shape({}),
    dotsClasses: PropTypes.shape({})
  }),
  /**
   * Function to construct props for a specific district
   */
  getBoundaryProps: PropTypes.func
};
export default Districts;