tsms/src/components/PastEntryCalendar/PastEntryCalendarModal.tsx

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  Typography,
  styled,
} from "@mui/material";
import PastEntryCalendar, {
  Props as PastEntryCalendarProps,
} from "./PastEntryCalendar";
import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { ArrowBack } from "@mui/icons-material";
import PastEntryList from "./PastEntryList";
import { ProjectWithTasks } from "@/app/api/projects";
import { LeaveType } from "@/app/api/timesheets";
import useIsMobile from "@/app/utils/useIsMobile";
import FullscreenModal from "../FullscreenModal";

interface Props extends Omit<PastEntryCalendarProps, "onDateSelect"> {
  open: boolean;
  handleClose: () => void;
  leaveTypes: LeaveType[];
  allProjects: ProjectWithTasks[];
}

const Indicator = styled(Box)(() => ({
  borderRadius: "50%",
  width: "1rem",
  height: "1rem",
}));

const PastEntryCalendarModal: React.FC<Props> = ({
  handleClose,
  open,
  timesheet,
  leaves,
  leaveTypes,
  allProjects,
}) => {
  const { t } = useTranslation("home");

  const [selectedDate, setSelectedDate] = useState("");

  const clearDate = useCallback(() => {
    setSelectedDate("");
  }, []);

  const onClose = useCallback(() => {
    handleClose();
  }, [handleClose]);

  const content = selectedDate ? (
    <>
      <PastEntryList
        date={selectedDate}
        timesheet={timesheet}
        leaves={leaves}
        allProjects={allProjects}
        leaveTypes={leaveTypes}
      />
    </>
  ) : (
    <>
      <Stack marginBlockEnd={2}>
        <Box display="flex" alignItems="center" gap={1}>
          <Indicator sx={{ backgroundColor: "info.light" }} />
          <Typography variant="caption">{t("Has timesheet entry")}</Typography>
        </Box>
        <Box display="flex" alignItems="center" gap={1}>
          <Indicator sx={{ backgroundColor: "warning.light" }} />
          <Typography variant="caption">{t("Has leave entry")}</Typography>
        </Box>
        <Box display="flex" alignItems="center" gap={1}>
          <Indicator sx={{ backgroundColor: "success.light" }} />
          <Typography variant="caption">
            {t("Has both timesheet and leave entry")}
          </Typography>
        </Box>
      </Stack>
      <PastEntryCalendar
        timesheet={timesheet}
        leaves={leaves}
        onDateSelect={setSelectedDate}
      />
    </>
  );

  const isMobile = useIsMobile();

  return isMobile ? (
    <FullscreenModal open={open} onClose={onClose} closeModal={onClose}>
      <Box display="flex" flexDirection="column" gap={2} height="100%">
        <Typography variant="h6" flex="none" padding={2}>
          {t("Past Entries")}
        </Typography>
        <Box
          flex={1}
          paddingInline={2}
          overflow="hidden"
          display="flex"
          flexDirection="column"
          sx={{ overflow: "scroll" }}
        >
          {content}
        </Box>
        <Box padding={2} display="flex" justifyContent="flex-end">
          {selectedDate && (
            <Button
              variant="outlined"
              startIcon={<ArrowBack />}
              onClick={clearDate}
            >
              {t("Back")}
            </Button>
          )}
        </Box>
      </Box>
    </FullscreenModal>
  ) : (
    <Dialog onClose={onClose} open={open}>
      <DialogTitle>{t("Past Entries")}</DialogTitle>
      <DialogContent>{content}</DialogContent>
      {selectedDate && (
        <DialogActions>
          <Button
            variant="outlined"
            startIcon={<ArrowBack />}
            onClick={clearDate}
          >
            {t("Back")}
          </Button>
        </DialogActions>
      )}
    </Dialog>
  );
};

export default PastEntryCalendarModal;