"use client";

import {
    Paper,
  } from "@mui/material";
import { useEffect, useMemo } from "react";
import StyledDataGrid from "../StyledDataGrid";
import { useTranslation } from "react-i18next";
import { GridColDef } from "@mui/x-data-grid";
import { PutAwayRecord } from ".";

type Props = {
    putAwayHistory : PutAwayRecord[];
};

const PutAwayReviewGrid: React.FC<Props> = ({ putAwayHistory }) => {
    const { t } = useTranslation("putAway");
    
    const columns: GridColDef[] = useMemo(() => [
        {
            field: "index",
            headerName: t(""),
            flex: 0.5,
            renderCell: (params) => {
                return (<b>{params.id}.</b>);
            },
            disableColumnMenu: true,
        },
        {
            field: "poCode",
            headerName: t("PoCode/JoCode"),
            flex: 2,
            disableColumnMenu: true,
            renderCell: (params) => {
                return (<>{params.row.joCode ? params.row.joCode : params.row.poCode}</>);
            },
        },
        {
            field: "itemCode",
            headerName: t("itemCode"),
            flex: 1,
            disableColumnMenu: true,
        },
        {
            field: "itemName",
            headerName: t("itemName"),
            flex: 2,
            disableColumnMenu: true,
        },
        {
            field: "putQty",
            headerName: t("putawayQty"),
            flex: 1,
            headerAlign: 'right',
            align: 'right',
            disableColumnMenu: true,
        },
        {
            field: "uom",
            headerName: t("uom"),
            flex: 1.5,
            disableColumnMenu: true,
        },
        {
            field: "warehouseCode",
            headerName: t("warehouse"),
            flex: 2,
            disableColumnMenu: true,
        },
       ], []
    )

    return (<>
        <Paper>
            <StyledDataGrid
                columns={columns}
                rows={putAwayHistory}
                autoHeight
                sx={{
                    '& .MuiDataGrid-columnHeaderTitle': {
                      whiteSpace: 'nowrap',
                      overflow: 'visible', 
                      textOverflow: 'clip',
                      lineHeight: 'normal',
                      paddingRight: '0px',
                    },
                    '& .MuiDataGrid-columnHeader': {
                        padding: '0 4px 0 4px',
                    },
                  }}
            />
        </Paper>
    </>)
}

export default PutAwayReviewGrid;