import PropTypes from 'prop-types';
import { STATE_SIZE, Canvas, StateDistricts } from "../../maps/index.js";
import { useContestCollectionStateFips, useGetMapFills, useMapColors } from "../../../hooks/election/index.js";
import { ElectionMapLegend } from "../index.js";
import useTooltip from "../../../hooks/useTooltip/index.js";
import DistrictTooltip from './DistrictTooltip';
import classes from './styles.module.scss';

/**
 * A map of a single state displaying results for all of its house districts.
 */
const StateDistrictsMap = function StateDistrictsMap(props) {
  const {
    collectionId
  } = props;
  const stateFips = useContestCollectionStateFips(collectionId, 'StateDistrictsMap');
  const colors = useMapColors({
    collectionId
  });
  const getDistrictProps = useGetMapFills(colors, 'geo');
  const tooltip = useTooltip({
    content: DistrictTooltip,
    props: {
      colors
    },
    displayProps: {
      unstyled: true
    }
  });
  const mapClasses = {
    mapContainer: classes.mapContainer
  };
  return <div className={classes.container}>
      <Canvas size={STATE_SIZE} zoomable customClasses={mapClasses}>
        {stateFips && <StateDistricts stateFips={stateFips} getBoundaryProps={getDistrictProps} tooltip={tooltip} />}
      </Canvas>
      <ElectionMapLegend palettes={colors.palettes} includeNoClearLeader={colors.includeNoClearLeader} includeRunoff={colors.includeRunoff} />
    </div>;
};
StateDistrictsMap.defaultProps = {};
StateDistrictsMap.propTypes = {
  /**
   * The ID of the contest collection to use
   */
  collectionId: PropTypes.string.isRequired
};
export default StateDistrictsMap;