import { DetailedProdScheduleLineProdTimeResult } from "@/app/api/scheduling"
import { minutesToHoursMinutes } from "@/app/utils/formatUtil";
import { Box, Divider, Grid, Typography } from "@mui/material";
import React, { useMemo } from "react"
import { useTranslation } from "react-i18next";

interface Props {
    prodTimeInMinute: DetailedProdScheduleLineProdTimeResult[];
}

const ProdTimeColumn: React.FC<Props> = ({ prodTimeInMinute }) => {

    const { t } = useTranslation("schedule")
    const overallMinutes = useMemo(() =>
        prodTimeInMinute
            .map((ele) => ele.totalMinutes)
            .reduce((acc, cur) => acc + cur, 0)
        , [])

    return (
        <Box>
            
            {
                prodTimeInMinute.map(({ equipName, totalMinutes }, index) => {
                    return (
                        <Grid container key={`${equipName}-${index}`}>
                            <Grid item key={`${equipName}-${index}-1`} xs={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Typography>{equipName}:</Typography>
                            </Grid>
                            <Grid item key={`${equipName}-${index}-2`} xs={8} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Typography>{minutesToHoursMinutes(totalMinutes)}</Typography>
                            </Grid>
                        </Grid>
                    )
                })
            }
            <Divider sx={{ border: 1, borderColor: "darkgray" }} />
            <Grid container>
                <Grid item xs={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <Typography>{t("Overall")}:</Typography>
                </Grid>
                <Grid item xs={8} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <Typography>{minutesToHoursMinutes(overallMinutes)}</Typography>
                </Grid>
            </Grid>
        </Box>
    )
}

export default ProdTimeColumn