import { useCalendar, useCalendarFilteredEvents } from "../../../../hooks/election/index.js";
import IfActive from "../../../application/IfActive/index.js";
import { getOfficeAdjective } from "../../../../utils/election/index.js";
import cx from "../../../../utils/css/cx.js";
import { prependContext } from "../../../../utils/tracking/index.js";
import classes from './styles.module.scss';
import CalendarLink from './CalendarLink';
import Calendar from './Calendar';
const cls = cx.merge(classes);

/**
 * The goal of this module is to show upcoming elections in a vertical
 * format. It starts with the next upcoming election. This module can be
 * filtered by office. (i.e. only show days with upcoming Presidential, or
 * Senate, elections)
 */
const PrimaryCalendarVertical = function PrimaryCalendarVertical(props) {
  const {
    office,
    limit,
    include,
    overflow,
    disableLabels,
    demConventionReporterNote = {},
    gopConventionReporterNote = {},
    tracking
  } = props;
  const data = useCalendar();
  const specialDates = data?.namedElections;
  const officeTitle = getOfficeAdjective(office, {
    unknownValue: 'Down Ballot',
    undefinedValue: ''
  });
  const eventsByDay = useCalendarFilteredEvents({
    office,
    limit,
    include,
    filterPassedEvents: true
  });
  const trackingOpts = {
    context: prependContext({
      prefix: 'PrimaryCalendarVertical',
      context: tracking?.context
    })
  };
  if (!eventsByDay) {
    return null;
  }
  return <div className={cls('container', {
    overflow
  }, {
    limit
  })}>
      <IfActive active={!disableLabels}>
        <span className={cls('overline')}>
          {`${officeTitle} Election Calendar`}
        </span>
      </IfActive>
      <div className={cls('inner', {
      overflow
    })} data-office={office}>
        <Calendar eventsByDay={eventsByDay} specialDates={specialDates} demConventionReporterNote={demConventionReporterNote} gopConventionReporterNote={gopConventionReporterNote} office={office} tracking={trackingOpts} />
      </div>
      <IfActive active={!disableLabels}>
        <CalendarLink tracking={trackingOpts} />
      </IfActive>
    </div>;
};
export default PrimaryCalendarVertical;