import React from "react";
import { ProjectHours } from "./UserWorkspaceWrapper";
import { Box, Card, CardContent, Chip, Grid, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { manhourFormatter } from "@/app/utils/formatUtil";

interface Props {
  projects: ProjectHours[];
}

const ProjectGrid: React.FC<Props> = ({ projects }) => {
  const { t } = useTranslation("home");
  return (
    <Box>
      <Grid container columns={{ xs: 4, sm: 8, md: 12, lg: 16 }} spacing={2}>
        {projects.map((project, idx) => (
          <Grid key={`${project.code}${idx}`} item xs={4}>
            <Card>
              <CardContent>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "flex-end",
                    marginBlockEnd: 1,
                  }}
                >
                  <Chip
                    size="small"
                    label={project.projectStatus}
                    color={
                      project.projectStatus === "On Track"
                        ? "success"
                        : "warning"
                    }
                  />
                </Box>
                <Typography variant="overline">{project.code}</Typography>
                <Typography
                  variant="h6"
                  sx={{
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    marginBlockEnd: 3,
                  }}
                >
                  {project.name}
                </Typography>
                {/* Hours Spent */}
                <Typography variant="subtitle2">{t("Hours Spent:")}</Typography>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="caption">{t("Normal")}</Typography>
                  <Typography>
                    {manhourFormatter.format(project.hoursSpent)}
                  </Typography>
                </Box>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="caption">{t("(Others)")}</Typography>
                  <Typography>{`(${manhourFormatter.format(
                    project.hoursSpentOther,
                  )})`}</Typography>
                </Box>
                {/* Hours Allocated */}
                <Typography variant="subtitle2" sx={{ marginBlockStart: 2 }}>
                  {t("Hours Allocated:")}
                </Typography>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="caption">{t("Normal")}</Typography>
                  <Typography>
                    {manhourFormatter.format(project.hoursAllocated)}
                  </Typography>
                </Box>
                <Box
                  sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                  }}
                >
                  <Typography variant="caption">{t("(Others)")}</Typography>
                  <Typography>{`(${manhourFormatter.format(
                    project.hoursAllocatedOther,
                  )})`}</Typography>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default ProjectGrid;