/* eslint-disable react/no-array-index-key */
import { useMemo } from 'react';
import cx from "../../../../utils/css/cx.js";
import { useCalendar } from "../../../../hooks/election/index.js";
import getDaysInMonth from '../utils/getDaysInMonth';
import classes from './styles.module.scss';
import Dot from './Dot';
const cls = cx.merge(classes);
export default function CalDots({
  monthNum,
  monthData = [],
  isPastMonth
}) {
  const calData = useCalendar();
  const daysInMonth = getDaysInMonth(monthNum, calData?.cycleMetadata.cycle);
  const dotsData = useMemo(() => {
    function insertPartyTags(day) {
      const dayString = day.toString().padStart(2, '0');
      const allElex = monthData.filter(({
        date
      }) => date.slice(-2) === dayString).map(({
        parties
      }) => parties);

      // Renders grey dot
      if (allElex.length < 1) return undefined;

      // Renders elex
      if (allElex.includes('allPartyPrimary')) return 'allPartyPrimary';
      if (allElex.includes('demAndGop')) return 'demAndGop';
      if (allElex.includes('demOnly') && allElex.includes('gopOnly')) {
        return 'demAndGop';
      }
      return allElex[0];
    }
    const allTags = Array.from({
      length: daysInMonth
    }, (_, i) => insertPartyTags(i + 1));
    return allTags;
  }, [monthData, calData]);
  return <div className={cls('dots-container')}>
      {dotsData.map((parties, i) => <Dot key={`${parties}-${i}`} parties={parties} isPastMonth={isPastMonth} />)}
    </div>;
}