import { useCalendarFilteredEvents } from "../../../../hooks/election/index.js";
import cx from "../../../../utils/css/cx.js";
import { IfActive } from "../../../application/index.js";
import { getOfficeAdjective } from "../../../../utils/election/index.js";
import classes from './styles.module.scss';
import PageDate from './PageDate';
import Link from './Link';
import EventType from '../EventType';
import Convention from './Contests/Convention';
import Election from './Contests/Election';
const cls = cx.merge(classes);

/**
 * The goal of this module is to show upcoming elections in a horizontal
 * 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 PrimaryCalendarHorizontal = function PrimaryCalendarHorizontal(props) {
  const {
    office,
    limit,
    include,
    overflow = false,
    disableLabels
  } = props;
  const eventsByDay = useCalendarFilteredEvents({
    office,
    limit,
    include,
    filterPassedEvents: true
  });
  if (!eventsByDay) {
    return null;
  }
  const officeTitle = getOfficeAdjective(office, {
    unknownValue: 'Down Ballot',
    undefinedValue: ''
  });
  const trackingOpts = {
    context: 'PrimaryCalendarHorizontal'
  };
  return <div className={cls('cal-hor', {
    overflow
  })}>
      <IfActive active={!disableLabels}>
        <span className={cls('overline')}>
          {`${officeTitle} Election Calendar`}
        </span>
      </IfActive>
      <div className={cls('container')} data-office={office}>
        {[...eventsByDay].map(([key, value], idx) => <div className={cls('date-group')} key={key} data-is-even={idx % 2 === 0}>
            <PageDate date={key} endDate={value[0]?.endDate} />
            {value.map((d, i) => <EventType components={{
          Convention,
          Election
        }} key={d.id} {...d} isEven={(i + idx) % 2 === 0} isRaised={i % 2 !== 0} office={office} tracking={trackingOpts} />)}
          </div>)}
      </div>
      <IfActive active={!disableLabels}>
        <Link tracking={trackingOpts} url="standalone:calendar" />
      </IfActive>
    </div>;
};
export default PrimaryCalendarHorizontal;