import cx from "../../../../utils/css/cx.js";
import useDateFormat from "../../../../hooks/useDateFormat/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const PollsClosingMapLegend = function PollsClosingMapLegend(props) {
  const {
    isSoon,
    limits = [],
    colorStops = []
  } = props;
  const format = '{Q} {D}, {h:m?} {P} {Z}';
  const limitMin = useDateFormat(limits[0], {
    format
  });
  const limitMax = useDateFormat(limits[1], {
    format
  });
  if (isSoon) {
    return <div className={classes.legendContainer}>
        <div className={classes.legendItem}>
          <div className={cls('legendKey', 'justClosed')} />
          <p>
            Polls just closed
          </p>
        </div>
        <div className={classes.legendItem}>
          <div className={cls('legendKey', 'closed')} />
          <p>
            Closed
          </p>
        </div>
        <div className={classes.legendItem}>
          <div className={cls('legendKey', 'partiallyClosed')} />
          <p>
            Some counties closed
          </p>
        </div>
        <div className={classes.legendItem}>
          <div className={cls('legendKey', 'closingSoon')} />
          <p>
            Closing soon
          </p>
        </div>
      </div>;
  }
  const stops = [...colorStops].reverse();
  return <div className={cls('gradientContainer')}>
      <div className={cls('time')}>
        {limitMax}
      </div>
      <div className={cls('gradient')}>
        {stops.map(stop => <div key={stop} className={cls('stop')} style={{
        background: stop
      }} />)}
      </div>
      <div className={cls('time')}>
        {limitMin}
      </div>
    </div>;
};
export default PollsClosingMapLegend;