import { useId } from 'react';
import classnames from 'classnames';
import getColor from "../../../utils/colors/getColor.js";
import { IfActive } from "../../application/index.js";
import { getStateName } from "../../../utils/election/index.js";
import PropTypes from 'prop-types';
import useBoundaryProps from '../hooks/useBoundaryProps';
import useTopojson from '../hooks/useTopojson';
import TooltipTrigger from '../OptionalTooltip';
import ActiveGeo from '../ActiveGeo';
import styles from './styles.module.scss';
import cartoShapes from './evs_carto.asset.json';
import labelPositionByCode from './labelPositionByCode';
import StateLabel from '../StateLabel';
const defaultBoundaryProps = {
  fill: 'white',
  stroke: 'white',
  strokeOpacity: 0.2
};
const defaultLabelProps = {
  fill: getColor('warmgray-100')
};
const ElectoralVotes = function ElectoralVotes(props) {
  const {
    tooltip,
    getBoundaryProps,
    getLabelProps,
    labelStyle
  } = props;
  const mapId = useId();

  // to do: some state labels
  const {
    states: {
      features: states
    }
  } = useTopojson(cartoShapes, {
    objects: ['states']
  });
  const boundaryProps = useBoundaryProps({
    getProps: getBoundaryProps,
    defaults: defaultBoundaryProps
  });
  const labelProps = useBoundaryProps({
    getProps: getLabelProps,
    defaults: defaultLabelProps
  });
  return <g>
      {states.map(({
      properties
    }) => <TooltipTrigger key={properties.code} as="g" tooltip={tooltip} props={{
      ...properties,
      mapId
    }}>
          <path className={classnames(styles.path)} d={properties.d} {...boundaryProps(properties)} strokeWidth="1" strokeOpacity="1" />
        </TooltipTrigger>)}
      <IfActive active={!!labelStyle}>
        <g>
          {states.map(({
          properties: ps
        }) => <IfActive key={ps.code} active={!!labelPositionByCode[ps.code]}>
              <TooltipTrigger key={ps.code} as="g" tooltip={tooltip} props={{
            ...ps,
            mapId
          }}>
                <StateLabel center={labelPositionByCode[ps.code]} label={getStateName(ps.code, {
              format: labelStyle
            })} {...labelProps(ps)} />
              </TooltipTrigger>
            </IfActive>)}
        </g>
      </IfActive>
      <ActiveGeo tooltip={tooltip} mapId={mapId} />
    </g>;
};
export default ElectoralVotes;
ElectoralVotes.defaultProps = {
  // specials: undefined,
  labelStyle: undefined,
  tooltip: undefined,
  getBoundaryProps: undefined,
  getLabelProps: undefined
  // sortBoundariesCompare: undefined,
};

ElectoralVotes.propTypes = {
  /**
   * The label style to use, either AP abbreviations or postal codes
   */
  labelStyle: PropTypes.oneOf(['ap_abbr', 'abbr']),
  /**
   * A tooltip object
   */
  tooltip: PropTypes.shape({}),
  /**
   * An accessor function to generate props for a specific boundary
   */
  getBoundaryProps: PropTypes.func,
  /**
   * An accessor function to generate props for a specific boundary's label
   */
  getLabelProps: PropTypes.func
};