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";
import MonthlySummary from "./MonthlySummary";
import { HolidaysResult } from "@/app/api/holidays";
import dayjs from "dayjs";

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

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 [currentMonth, setMonthChange] = useState(dayjs());

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

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

  const content = (
    <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
      <Box>
        <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}
          onMonthChange={setMonthChange}
        />
      </Box>
      {selectedDate ? (
        <PastEntryList
          date={selectedDate}
          timesheet={timesheet}
          leaves={leaves}
          allProjects={allProjects}
          leaveTypes={leaveTypes}
        />
      ) : (
        <MonthlySummary
          currentMonth={currentMonth}
          timesheet={timesheet}
          leaves={leaves}
          companyHolidays={[]}
          onDateSelect={setSelectedDate}
        />
      )}
    </Box>
  );

  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 to Monthly Summary")}
            </Button>
          )}
        </Box>
      </Box>
    </FullscreenModal>
  ) : (
    <Dialog onClose={onClose} open={open} maxWidth="md">
      <DialogTitle>{t("Past Entries")}</DialogTitle>
      <DialogContent>{content}</DialogContent>
      {selectedDate && (
        <DialogActions>
          <Button
            variant="outlined"
            startIcon={<ArrowBack />}
            onClick={clearDate}
          >
            {t("Back to Monthly Summary")}
          </Button>
        </DialogActions>
      )}
    </Dialog>
  );
};

export default PastEntryCalendarModal;