tsms/src/components/PastEntryCalendar/PastEntryCalendar.tsx

import React from "react";
import {
  RecordTimesheetInput,
  RecordLeaveInput,
} from "@/app/api/timesheets/actions";
import {
  DateCalendar,
  LocalizationProvider,
  PickersDay,
  PickersDayProps,
} from "@mui/x-date-pickers";
import { useTranslation } from "react-i18next";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/zh-hk";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { INPUT_DATE_FORMAT } from "@/app/utils/formatUtil";

dayjs.extend(utc);
dayjs.extend(timezone);

dayjs.tz.guess();

export interface Props {
  timesheet: RecordTimesheetInput;
  leaves: RecordLeaveInput;
  publicHolidays: string[];
  onDateSelect: (date: string) => void;
  onMonthChange: (day: Dayjs) => void;
}

const getColor = (
  hasTimeInput: boolean,
  hasLeave: boolean,
  isPublicHoliday: boolean,
): string | undefined => {
  if (hasTimeInput && hasLeave) {
    return "success.light";
  } else if (hasTimeInput) {
    return "info.light";
  } else if (hasLeave) {
    return "warning.light";
  } else if (isPublicHoliday){
    return "error.light";
  }else {
    return undefined;
  }
};

const EntryDay: React.FC<PickersDayProps<Dayjs> & Props> = ({
  timesheet,
  leaves,
  publicHolidays,
  ...pickerProps
}) => {
  const timesheetDays = Object.keys(timesheet);
  const leaveDays = Object.keys(leaves);

  const hasTimesheetInput = timesheetDays.some((day) =>
    dayjs(day).isSame(pickerProps.day, "day"),
  );

  const hasLeaveInput = leaveDays.some((day) =>
    dayjs(day).isSame(pickerProps.day, "day"),
  );

  const isPublicHoliday = publicHolidays.some((day) =>
    dayjs(day).isSame(pickerProps.day, "day"),
  );

  return (
    <PickersDay
      {...pickerProps}
      disabled={!(hasTimesheetInput || hasLeaveInput)}
      sx={{ backgroundColor: getColor(hasTimesheetInput, hasLeaveInput, isPublicHoliday) }}
    />
  );
};

const PastEntryCalendar: React.FC<Props> = ({
  timesheet,
  leaves,
  publicHolidays,
  onDateSelect,
  onMonthChange,
}) => {
  const {
    i18n: { language },
  } = useTranslation("home");

  const onChange = (day: Dayjs) => {
    onDateSelect(day.format(INPUT_DATE_FORMAT));
  };

  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      adapterLocale={`${language}-hk`}
    >
      <DateCalendar
        onChange={onChange}
        onMonthChange={onMonthChange}
        disableFuture
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        slots={{ day: EntryDay as any }}
        slotProps={{
          day: {
            timesheet,
            leaves,
            publicHolidays,
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
          } as any,
        }}
      />
    </LocalizationProvider>
  );
};

export default PastEntryCalendar;