import { ProjectWithTasks } from "@/app/api/projects";
import { Task } from "@/app/api/tasks";
import { TimeEntry } from "@/app/api/timesheets/actions";
import { manhourFormatter } from "@/app/utils/formatUtil";
import { Edit } from "@mui/icons-material";
import { Box, Card, CardContent, IconButton, Typography } from "@mui/material";
import React from "react";
import { useTranslation } from "react-i18next";

interface Props {
  project?: ProjectWithTasks;
  task?: Task;
  entry: TimeEntry;
  onEdit?: () => void;
}

const TimeEntryCard: React.FC<Props> = ({ project, task, entry, onEdit }) => {
  const { t } = useTranslation("home");
  return (
    <Card sx={{ marginInline: 1, overflow: "visible" }}>
      <CardContent
        sx={{
          padding: 2,
          display: "flex",
          flexDirection: "column",
          gap: 2,
          "&:last-child": {
            paddingBottom: 2,
          },
        }}
      >
        <Box
          display="flex"
          justifyContent="space-between"
          alignItems="flex-start"
          gap={2}
        >
          <Box>
            <Typography variant="body2" component="div" fontWeight="bold">
              {project
                ? `${project.code} - ${project.name}`
                : t("Non-billable Task")}
            </Typography>
            {task && (
              <Typography variant="body2" component="div">
                {task.name}
              </Typography>
            )}
          </Box>
          {onEdit && (
            <IconButton size="small" color="primary" onClick={onEdit}>
              <Edit />
            </IconButton>
          )}
        </Box>
        <Box display="flex" gap={2}>
          <Box>
            <Typography variant="body2" component="div" fontWeight="bold">
              {t("Hours")}
            </Typography>
            <Typography component="p">
              {manhourFormatter.format(entry.inputHours || 0)}
            </Typography>
          </Box>
          <Box>
            <Typography variant="body2" component="div" fontWeight="bold">
              {t("Other Hours")}
            </Typography>
            <Typography component="p">
              {manhourFormatter.format(entry.otHours || 0)}
            </Typography>
          </Box>
        </Box>
        {entry.remark && (
          <Box>
            <Typography variant="body2" component="div" fontWeight="bold">
              {t("Remark")}
            </Typography>
            <Typography component="p">{entry.remark}</Typography>
          </Box>
        )}
      </CardContent>
    </Card>
  );
};

export default TimeEntryCard;
