import { projects } from "@/app/api/staff";
import { Box, Card, CardContent, Divider, Grid, Stack, SxProps, Typography } from "@mui/material";
import StyledDataGrid from "../StyledDataGrid";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";


interface Props {
    InvolvedProject: projects[]
  }


const ProjectHistory: React.FC<Props> = async ({ InvolvedProject }) => {
    const { t } = useTranslation();
    console.log(InvolvedProject)
    const _sx: SxProps = useMemo(() => (
      InvolvedProject.length == 0 ? 
        {
          height: 300
        }
        :
        {
          height: 500
        }
      )
    , []);
    const projectCols = useMemo(
        () => [
          {
            field: 'code',
            headerName: t("Code"),
            flex: .4,
          },
          {
            field: 'name',
            headerName: t("Name"),
            flex: 1,
          },
      ], [InvolvedProject])

    return (
        <Card sx={{ display: "block" }}>
          <CardContent component={Stack} spacing={4}>
            <Box>
             <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                
                <Grid item xs={6}>
                <Typography variant="h5">
                    {t("On-going Projects")}:
                </Typography>
                <Divider sx={{ paddingBlockStart: 2 }}/>
                    <StyledDataGrid
                        sx={_sx}
                        rows={InvolvedProject?.filter(item => item.status === "On-going") ?? []}
                        columns={projectCols}
                    />
                </Grid>
                <Grid item xs={6}>
                <Typography variant="h5">
                    {t("Completed Projects")}:
                </Typography>
                <Divider sx={{ paddingBlockStart: 2 }}/>
                    <StyledDataGrid
                        sx={_sx}
                        rows={InvolvedProject?.filter(item => item.status === "Completed") ?? []}
                        columns={projectCols}
                    />
                </Grid>
             </Grid>
            </Box>
          </CardContent>
        </Card>
    )

}
export default ProjectHistory;
