import { useState } from 'react';
import { useCalendar } from "../../../hooks/election/index.js";
import { IfActive } from "../../application/index.js";
import { Divider } from "../../layout/index.js";
import PrimaryCalendar from '../PrimaryCalendar';
import DropdownSelect from '../DropdownSelect';
import useSelectOptions from './useSelectOptions';
import useCalendarLabels from './useCalendarLabel';
import ModuleEyebrow from '../ModuleEyebrow';

/**
 * A set of lookups for the calendar page
 */
const CalendarAccoutrements = () => {
  const calendar = useCalendar();
  const [stateFips, setStateFips] = useState();
  const options = useSelectOptions(calendar);
  const [soonLabel, stateLabel] = useCalendarLabels({
    calendar,
    stateFips
  });
  const trackingOpts = {
    context: 'CalendarAccoutrements'
  };
  return <div>
      <DropdownSelect placeholder="Find a state" options={options} onSelect={setStateFips} inputType="auto" size="lg" value={stateFips} tracking={trackingOpts} />
      <Divider margin={{
      b: 6
    }} />

      <IfActive active={stateFips}>
        <>
          <h6>
            <ModuleEyebrow link={stateFips && `state:${stateFips}:index`} text={stateLabel} tracking={trackingOpts} />
          </h6>
          <Divider margin={{
          b: 3
        }} />
          <PrimaryCalendar stateFips={stateFips} disableLabels wrap />
          <Divider margin={{
          b: 6
        }} />
        </>
      </IfActive>

      <h6>
        <ModuleEyebrow text={soonLabel} />
      </h6>

      <Divider margin={{
      b: 3
    }} />

      <PrimaryCalendar limit={1} include={['election']} disableLabels tracking={trackingOpts} overflow />
    </div>;
};
export default CalendarAccoutrements;