import PropTypes from 'prop-types';
import StatesCarto from "../../maps/StatesCarto/index.js";
import Canvas from "../../maps/Canvas/index.js";
import PollsClosingGlimpse from '../PollsClosingGlimpse';
import PollsClosingMapLegend from './PollsClosingMapLegend';
import useCartoProps from './useCartoProps';
import classes from './styles.module.scss';

/**
 * This is a component that shows where and when polls are closing. Specifically, it shows where polls partially or fully closed most recently and the soonest upcoming batch of states where they will partially or fully close. The component will render this information by comparing time stamps from a dataset containing poll closing times data and comparing it to the current time. This is a recirculation module intended to be placed on index pages.
 */
const PollsClosingMap = function PollsClosingMap(props) {
  const {
    mode
  } = props;
  const {
    isSoon,
    cartoProps,
    legendProps
  } = useCartoProps({
    mode
  });
  return <div>
      <div className={classes.pollsClosingGlimpse}>
        <PollsClosingGlimpse />
      </div>
      <div className={classes.pollsClosingMap}>
        <PollsClosingMapLegend isSoon={isSoon} {...legendProps} />
        <Canvas>
          <StatesCarto getBoundaryProps={cartoProps.boundaryProps} getLabelProps={cartoProps.labelProps} />
        </Canvas>
      </div>
    </div>;
};
PollsClosingMap.defaultProps = {
  mode: 'auto'
};
PollsClosingMap.propTypes = {
  mode: PropTypes.oneOf(['auto', 'soon', 'gradient'])
};
export default PollsClosingMap;