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";

interface Props extends Omit<PastEntryCalendarProps, "onDateSelect"> {
  open: boolean;
  handleClose: () => void;
}

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

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

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

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

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

  return (
    <Dialog onClose={onClose} open={open}>
      <DialogTitle>{t("Past Entries")}</DialogTitle>
      <DialogContent>
        {selectedDate ? (
          <Box>{selectedDate}</Box>
        ) : (
          <Box>
            <Stack>
              <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}
            />
          </Box>
        )}
      </DialogContent>
      {selectedDate && (
        <DialogActions>
          <Button
            variant="outlined"
            startIcon={<ArrowBack />}
            onClick={clearDate}
          >
            {t("Back")}
          </Button>
        </DialogActions>
      )}
    </Dialog>
  );
};

export default PastEntryCalendarModal;