import PropTypes from 'prop-types';
import { STATE_SIZE, Canvas, StateCounties } from "../../maps/index.js";
import { useContestMetadata, useContestCountyMapColors } from "../../../hooks/election/index.js";
import useTooltip from "../../../hooks/useTooltip/index.js";
import Legend from './Legend';
import CountyTooltip from './CountyTooltip';
import useGetCountyProps from './useGetCountyProps';
import useSortBoundariesCompare from './useSortBoundariesCompare';
import classes from './styles.module.scss';

/**
 * A county-level map of a single state displaying county-level results
 * for a state-wide race.
 */
const StateRaceCountiesMap = function StateRaceCountiesMap(props) {
  const {
    contestId
  } = props;
  const {
    stateFips
  } = useContestMetadata(contestId) || {};
  const colors = useContestCountyMapColors(contestId);
  const getCountyProps = useGetCountyProps(colors);
  const sortBoundariesCompare = useSortBoundariesCompare(colors);
  const tooltip = useTooltip({
    content: CountyTooltip,
    props: {
      contestId,
      colors
    },
    displayProps: {
      unstyled: true
    }
  });
  const mapClasses = {
    mapContainer: classes.mapContainer
  };
  return <div className={classes.container}>
      <Canvas size={STATE_SIZE} zoomable customClasses={mapClasses}>
        {stateFips && <StateCounties stateFips={stateFips} getBoundaryProps={getCountyProps} sortBoundariesCompare={sortBoundariesCompare} tooltip={tooltip} />}
      </Canvas>
      <Legend palettes={colors.palettes} includeNoClearLeader={colors.includeNoClearLeader} />
    </div>;
};
StateRaceCountiesMap.defaultProps = {};
StateRaceCountiesMap.propTypes = {
  /**
   * The ID of the contest
   */
  contestId: PropTypes.string.isRequired
};
export default StateRaceCountiesMap;