/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/**
 * The two linting rules above are disabled to allow us to apply a click
 * handler to a <span> that stops propagation of click events from bubbling up
 * and closing the card. The handler does not need to be accessible because it
 * doesn't _add_ any functionality — it simply prevents the event from
 * propagating.
 */

import useDateFormat from "../../../../hooks/useDateFormat/index.js";
import { ordinal } from 'journalize';
import cx from "../../../../utils/css/cx.js";
import getCalendarNote from "../../../../utils/election/getCalendarNote/index.js";
import IfActive from "../../../application/IfActive/index.js";
import partyNames from "../../../../utils/election/constants/partyNames.js";
import ElectionCaretLink from "../../ElectionCaretLink/index.js";
import ReporterNote from '../../ReporterNote';
import classes from './styles.module.scss';
import PartyTags from '../../PartyTags';
import Sticker from '../Sticker';
const cls = cx.merge(classes);
const stopPropagation = e => {
  e.stopPropagation();
};
export default function BodyItem({
  date,
  data,
  conventionNotes,
  namedElex,
  tracking
}) {
  const day = useDateFormat(date, {
    format: '{D}',
    timeZone: 'UTC'
  });
  const namedElexDay = useDateFormat(namedElex?.[0].date, {
    format: '{D}',
    timeZone: 'UTC'
  });
  const dayOrd = ordinal(day);

  // Convention day details
  const endDay = useDateFormat(data.endDate, {
    format: '{D}',
    timeZone: 'UTC'
  });
  const endDayOrd = ordinal(endDay);
  const conOrd = `${dayOrd}-${endDayOrd}`;
  const conNotes = {
    gop: conventionNotes.gopConventionReporterNote,
    dem: conventionNotes.demConventionReporterNote
  };
  return <div className={cls('day-container')}>
      <div className={cls('day-head')}>
        <div className={cls('relative')}>
          <h4>{data.endDate ? conOrd : dayOrd}</h4>
          <IfActive active={day === namedElexDay}>
            <Sticker noNum namedElex={namedElex} />
          </IfActive>
        </div>
      </div>
      <div className={cls('day-content', {
      convention: !!data?.endDate,
      'one-col': data.length === 1
    })}>
        <IfActive active={!!data.endDate}>
          <div className={cls('convention')}>
            <p>
              <span className={cls(data.party)}>
                {partyNames[data.party]?.abbr}
              </span>
              {' Convention'}
            </p>
            <IfActive active={conNotes[data.party]}>
              <ReporterNote {...conNotes[data.party]} disableTimestamp layout="vertical-bottom" />
            </IfActive>
          </div>
        </IfActive>
        {data.length && data.map(d => <div key={d.id} className={cls('state-link')}>
              <PartyTags parties={d.parties} />
              <span className={cls('link')} onClick={stopPropagation} onKeyPress={stopPropagation}>
                <ElectionCaretLink to={`state:${d.stateFips}:index`} text={d.state} tracking={tracking} unstyled />
              </span>
              <span className={cls('state-note')}>{getCalendarNote(d)}</span>
            </div>)}
      </div>
    </div>;
}