export default function CalendarHeader({ currentMonth, prevMonth, nextMonth }: CalendarHeaderProps) {
  return (
    <HeaderWrapper>
      <PrevMonthButton onClick={prevMonth}>{"<"}</PrevMonthButton>
      <YearMonthWrapper>
        {format(currentMonth, "yyyy")}년 {format(currentMonth, "MM")}월
      </YearMonthWrapper>
      <NextMonthButton onClick={nextMonth}> {">"}</NextMonthButton>
    </HeaderWrapper>
  );
}

export default function Week() {
  const DATE: string[] = ["일", "월", "화", "수", "목", "금", "토", "일"];

  const dateList: JSX.Element[] = DATE.map((day, index) => <DayWrapper key={index}>{day}</DayWrapper>);
  return <WeekWrapper>{dateList}</WeekWrapper>;
}

export default function Days({ currentMonth, selectedDate }: DaysProps) {
  const monthStart = startOfMonth(currentMonth); //date-fns method들로 가져왔습니다. 
  const monthEnd = endOfMonth(monthStart);
  const startDate = startOfWeek(monthStart);
  const endDate: Date = endOfWeek(monthEnd);
  const scheduleData = SCHEDULE_DATA.map((item) => ({
    ...item,
    date: item.date.map((data) => parse(data, "yyyy.MM.dd", new Date())),
  })); //그냥 data로는 date를 읽기가 어려워서 `map`을 돌려서 바꾸었습니다.

  const sortedScheduleData = scheduleData.sort((a, b) => a.time.localeCompare(b.time));
//시간순으로 정렬하였습니다!
//참고로, 7월로 날짜 변경했습니당~

  const rows: React.ReactNode[] = [];
  let days: React.ReactNode[] = [];
  let day: Date = startDate;
  let formattedDate = "";

//그 주 마지막 날,,그니까 8월 5일까지 보이잖아여? 달력에서 흐리게, 그때까지 보이게 설정하였습니다.
  while (day <= endDate) {
    for (let i = 0; i < 7; i++) {
      formattedDate = format(day, "d");
      const sunDay = isSunday(day); //일욜만 색을 빨간색으로 바꿔야 할 것 같아서요!
      const daySchedule = sortedScheduleData.filter((item) => item.date.some((date) => isSameDay(date, day)));
//데이터에 맞는 날짜에 표기해주기 위한 로직입니다.

//날짜를 보여주는 로직입니당
      days.push(
        <Day key={day.toString()} $issunday={sunDay}>
          <DayText
            $issameday={isSameDay(day, selectedDate)}
            $isnotvalid={format(currentMonth, "M") !== format(day, "M")}>
            {formattedDate}
          </DayText>
          {daySchedule.map((schedule) => (
            <ScheduleWrapper key={schedule.id} $student={schedule.student}>
              {schedule.student} {schedule.time.slice(0, 5)}
            </ScheduleWrapper>
          ))}
        </Day>,
      );
      day = addDays(day, 1);
    }
    rows.push(<DaysWrapper key={day.toString()}>{days}</DaysWrapper>);
    days = [];
  }

  return <Wrapper>{rows}</Wrapper>;
}

${({ $student }) => {
    switch ($student) {
      case "지수":
        return `
          background-color: #FFD9F2
        `;
        break;

      case "희정":
        return `
          background-color:#E3D2FA`;
        break;

      case "혜인":
        return `
            background-color:#D3F1C1`;
        break;

      case "성경":
        return `
          background-color: #CCF5ED
        `;
        break;

      case "은빈":
        return `
          background-color:#EBDDD5 `;
        break;

      default:
        return undefined;
    }

interface DayProp {
  $issunday: boolean;
}

const Day = styled.article<DayProp>`
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 5rem;
  width: 30rem;

  ${({ $issunday }) => `
    ${$issunday ? "color: #FCB3A6" : undefined}
  `};
`;

interface DayTextProps {
  $isnotvalid: boolean;
  $issameday: boolean;
}

const DayText = styled.p<DayTextProps>`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;

  ${({ $isnotvalid, $issameday }) => `
    ${$isnotvalid ? "color: #CED4DA" : ""}
    ${$issameday ? "color: white; background-color: #0DA98E; border-radius: 50%; " : ""}    
  `};
`;