import cx from "../../../utils/css/cx.js";
import groupToMap from "../../../utils/grouping/groupToMap.js";
import { useMemo } from 'react';
import { toSafeInteger } from 'lodash';
import useA11yOnClick from "../../../hooks/useA11yOnClick/index.js";
import IfActive from "../../application/IfActive/index.js";
import { useTrackStandardEvent } from "../../../hooks/tracking/index.js";
import classes from './styles.module.scss';
import CalDots from './CalDots';
import CardBody from './CardBody';
import Sticker from './Sticker';
const cls = cx.merge(classes);

/**
 * @param {object} props.monthMeta - Object containing `name` and `num` month properties
 * @param {object} props.monthData - Data for the month
 * @param {object} [props.convention] - Convention dates if present in month
 * @param {object} [props.namedElex] - Labels for named election dates
 * @param {string} props.fullCard - Stateful string of current month that's been expanded
 * @param {function} props.setFullCard - `fullCard` setter
 * @param {object} [props.conventionNotes] - Reporter notes for convention
 *
 */
export default function CardItem({
  monthData,
  monthMeta,
  convention,
  namedElex,
  activeMonth,
  fullCard,
  setFullCard,
  conventionNotes,
  isLast
}) {
  const {
    num: monthNum,
    name: monthName
  } = monthMeta;
  const isActive = activeMonth === monthNum;
  // Group data by day
  const dayGroups = useMemo(() => {
    const data = groupToMap(monthData || [], 'date');
    if (convention) {
      data.set(convention[0].startDate.slice(0, -14), convention[0]);
    }
    return data;
  }, [monthData]);
  const isPastMonth = toSafeInteger(activeMonth) > toSafeInteger(monthNum);
  const cardStates = {
    'is-active': !fullCard && isActive,
    'is-past': isPastMonth,
    'is-full': fullCard === monthNum,
    'is-last': isLast,
    'no-elections': dayGroups.size === 0
  };
  const trackingOpts = {
    component: 'PrimaryCalCardStack'
  };
  const track = useTrackStandardEvent(trackingOpts);
  const handleClick = useA11yOnClick(() => {
    if (fullCard === monthNum) {
      setFullCard(undefined);
      track({
        event: 'CloseCard',
        detail: monthNum
      });
      return;
    }
    setFullCard(monthNum);
    track({
      event: 'OpenCard',
      detail: monthNum
    });
  }, [setFullCard, fullCard]);
  return <div className={cls('card-container', cardStates)}>
      <div style={{
      '--months-left': 10 - toSafeInteger(monthNum)
    }} className={cls('card', 'shadow-100', cardStates)} {...handleClick}>
        <div className={cls('card-header', cardStates)}>
          <div className={cls('relative', 'month-header')}>
            <h3 className={cls('card-month', cardStates)}>{monthName}</h3>
            <IfActive active={!!convention || !!namedElex}>
              <Sticker convention={convention} namedElex={namedElex} />
            </IfActive>
          </div>
          <CalDots monthNum={monthNum} monthData={monthData} isPastMonth={isPastMonth} />
        </div>
        <div className={cls('animation-container', cardStates)}>
          <div className={cls('animation-inner')}>
            <CardBody dayGroups={dayGroups} conventionNotes={conventionNotes} namedElex={namedElex} />
          </div>
        </div>
      </div>
    </div>;
}