import usePollClosingTimes from "../../../hooks/election/usePollClosingTimes/index.js";
import { useNowInterval } from "../../../hooks/time/index.js";
import PollsClosingEventCard from './PollsClosingEventCard';
import NowLine from './NowLine';
import classes from './styles.module.scss';

/**
 * This is a component that shows where polls will fully and partially close at different times. It includes a time stamp (the red "Now" line) orienting the reader to the current time in their time zone in relation to the poll closing times displayed. This data in this module is rendered with the help of a dataset containing poll closing times data for different states.
 */
const PollsClosingPageCards = function PollsClosingPageCards() {
  const pollClosingTimes = usePollClosingTimes();
  const currentTime = useNowInterval(60000);
  return <div>

      {pollClosingTimes.map((time, index, events) => <div key={time}>

          <div className={classes.eventCard}>

            <PollsClosingEventCard time={time.date} partiallyClosed={time.partiallyClosed} fullyClosed={time.fullyClosed} />

          </div>

          <NowLine currentTime={currentTime} previousEvent={time} nextEvent={events[index + 1]} />

        </div>)}

    </div>;
};
PollsClosingPageCards.defaultProps = {};
PollsClosingPageCards.propTypes = {};
export default PollsClosingPageCards;