tsms/src/components/TimesheetAmendment/TimesheetAmendmentModal.tsx

import useIsMobile from "@/app/utils/useIsMobile";
import React from "react";
import FullscreenModal from "../FullscreenModal";
import {
  Box,
  Card,
  CardContent,
  Modal,
  SxProps,
  Typography,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import TimesheetAmendment, {
  Props as TimesheetAmendmentProps,
} from "./TimesheetAmendment";

const modalSx: SxProps = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: { xs: "calc(100% - 2rem)", sm: "90%" },
  maxHeight: "90%",
  maxWidth: 1400,
};

interface Props extends TimesheetAmendmentProps {
  open: boolean;
  onClose: () => void;
  isSaturdayWorker: boolean;
}

export const TimesheetAmendmentModal: React.FC<Props> = ({
  open,
  onClose,
  leaveTypes,
  teamLeaves,
  teamTimesheets,
  companyHolidays,
  allProjects,
  miscTasks,
  isSaturdayWorker,
  userId
}) => {
  const { t } = useTranslation("home");
  const isMobile = useIsMobile();

  const title = t("Timesheet Amendments");
  const content = (
    <TimesheetAmendment
      leaveTypes={leaveTypes}
      teamLeaves={teamLeaves}
      companyHolidays={companyHolidays}
      teamTimesheets={teamTimesheets}
      allProjects={allProjects}
      miscTasks={miscTasks}
      isSaturdayWorker={isSaturdayWorker}
      userId={userId}
    />
  );

  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}>
          {title}
        </Typography>
        <Box paddingInline={2}>{content}</Box>
      </Box>
    </FullscreenModal>
  ) : (
    <Modal open={open} onClose={onClose}>
      <Card sx={modalSx}>
        <CardContent>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {title}
          </Typography>
          <Box maxHeight={900} overflow="scroll">
            {content}
          </Box>
        </CardContent>
      </Card>
    </Modal>
  );
};