import { useCalendar } from "../../../../hooks/election/index.js";
import { useMemo } from 'react';
import getStateName from "../../../../utils/election/getStateName/index.js";
import CalendarGroup from "../../CalendarGroup/index.js";
import classes from './styles.module.scss';

/**
 * The goal of this module is to show a state’s election calendar. We show
 * all dates at all times, but if a date is past it gets a different
 * treatment.
 */
const PrimaryCalendarState = function PrimaryCalendarState(props) {
  const {
    stateFips,
    wrap = false,
    disableLabels
  } = props;
  const data = useCalendar();
  const stateElex = useMemo(() => data?.electionEvents.filter(d => d.stateFips === stateFips || d.isNationalGeneral), [data, stateFips]);
  const stateName = `${getStateName(stateFips, {
    possessive: true
  })} Election Days`;
  if (!stateElex) return null;
  return <div className={classes.calendar}>
      <CalendarGroup wrap={wrap} events={stateElex} heading={disableLabels ? undefined : stateName} />
    </div>;
};
export default PrimaryCalendarState;