import React, { useState } from 'react';

function Calendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  // 使用Set來存儲選中的日期，方便添加和刪除，并確保唯一性
  const [selectedDates, setSelectedDates] = useState(new Set()); 

  // ... 其他日歷邏輯
}

const handleClick = (day) => { // 直接傳入點(diǎn)擊的day，更清晰
  // 構(gòu)建完整的日期字符串 (YYYY-MM-DD) 作為唯一標(biāo)識
  const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

  // 使用函數(shù)式更新確保獲取到最新的狀態(tài)
  setSelectedDates(prevSelectedDates => {
    const newSelectedDates = new Set(prevSelectedDates); // 創(chuàng)建Set的副本以保持不可變性
    if (newSelectedDates.has(fullDate)) {
      newSelectedDates.delete(fullDate); // 如果已選中，則取消選中
    } else {
      newSelectedDates.add(fullDate); // 如果未選中，則添加選中
    }
    return newSelectedDates;
  });
};

// 在渲染日期的部分
<div className="dates">
  {/* ... 空白占位符 */}

  { 
    Array.from({ length: currentLastDay }, (_, d) => {
      const day = d + 1;
      // 構(gòu)建當(dāng)前日期字符串用于檢查是否選中
      const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      const isDaySelected = selectedDates.has(fullDate);

      return (
        <span 
          className={`${isToday(day) ? "active" : ""} ${isDaySelected ? "selected" : ""}`} 
          key={fullDate} // 使用完整的日期字符串作為key，確保唯一性
          onClick={() => handleClick(day)} // 直接綁定到span，并傳入day
        >
          {day}
        </span>
      );
    }) 
  }
</div>

import React, { useState } from 'react';

const MONTHS = [
  "January", "February", "March", "April", "May", "June", 
  "July", "August", "September", "October", "November", "December"
];

// 假設(shè)這些函數(shù)和變量在組件外部或通過props傳入
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
const isToday = (day, month, year) => {
  const today = new Date();
  return day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
};

function Calendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  // 使用Set存儲選中的完整日期字符串，如 "2023-06-02"
  const [selectedDates, setSelectedDates] = useState(new Set()); 

  const handlePrevClicked = () => {
    setCurrentMonth(prevMonth => {
      if (prevMonth === 0) {
        setCurrentYear(prevYear => prevYear - 1);
        return 11;
      }
      return prevMonth - 1;
    });
  };

  const handleNextClicked = () => {
    setCurrentMonth(prevMonth => {
      if (prevMonth === 11) {
        setCurrentYear(prevYear => prevYear + 1);
        return 0;
      }
      return prevMonth + 1;
    });
  };

  const handleClick = (day) => {
    const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

    setSelectedDates(prevSelectedDates => {
      const newSelectedDates = new Set(prevSelectedDates);
      if (newSelectedDates.has(fullDate)) {
        newSelectedDates.delete(fullDate);
      } else {
        newSelectedDates.add(fullDate);
      }
      return newSelectedDates;
    });
  };

  const currentLastDay = getDaysInMonth(currentYear, currentMonth);
  const currentStartingDay = getFirstDayOfMonth(currentYear, currentMonth);

  return (
    <div className="datePicker">
      <div className="pickerHeader">
        <button onClick={handlePrevClicked}>Prev</button>
        <h1>
          {MONTHS[currentMonth]}
          <small>  |   {currentYear}</small>
        </h1>
        <button onClick={handleNextClicked}>Next</button>
      </div>

      <div className="weekHeader">
        <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
      </div>

      <div className="dates">
        {Array.from({ length: currentStartingDay }, (_, i) => (
          <span className="empty" key={`empty-${i}`} />
        ))}

        {Array.from({ length: currentLastDay }, (_, d) => {
          const day = d + 1;
          const fullDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
          const isDaySelected = selectedDates.has(fullDate);

          return (
            <span
              className={`${isToday(day, currentMonth, currentYear) ? "active" : ""} ${isDaySelected ? "selected" : ""}`}
              key={fullDate}
              onClick={() => handleClick(day)}
            >
              {day}
            </span>
          );
        })}
      </div>
    </div>
  );
}

export default Calendar;