import { JoDetail } from "@/app/api/jo";
import { decimalFormatter } from "@/app/utils/formatUtil";
import { GridColDef } from "@mui/x-data-grid";
import { isEmpty, upperFirst } from "lodash";
import { useMemo } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import StyledDataGrid from "../StyledDataGrid/StyledDataGrid";

type Props = {

};

const PickTable: React.FC<Props> = ({

}) => {
    const { t } = useTranslation("jo")
    const {
        watch
    } = useFormContext<JoDetail>()

    const columns = useMemo<GridColDef[]>(() => [
        {
            field: "code",
            headerName: t("Code"),
            flex: 1,
        },
        {
            field: "name",
            headerName: t("Name"),
            flex: 1,
        },
        {
            field: "lotNo",
            headerName: t("Lot No."),
            flex: 1,
            renderCell: (row) => {
                return isEmpty(row.value) ? "N/A" : row.value
            },
        },
        {
            field: "reqQty",
            headerName: t("Req. Qty"),
            flex: 1,
            align: "right",
            headerAlign: "right",
            renderCell: (row) => {
                return decimalFormatter.format(row.value)
            },
        },
        {
            field: "uom",
            headerName: t("UoM"),
            flex: 1,
            align: "left",
            headerAlign: "left",
        },
        {
            field: "status",
            headerName: t("Status"),
            flex: 1,
            renderCell: (row) => {
                return t(upperFirst(row.value))
            },
        },
    ], [])

    return (
        <>
            <StyledDataGrid
                sx={{
                    "--DataGrid-overlayHeight": "100px",
                    ".MuiDataGrid-row .MuiDataGrid-cell.hasError": {
                        border: "1px solid",
                        borderColor: "error.main",
                    },
                    ".MuiDataGrid-row .MuiDataGrid-cell.hasWarning": {
                        border: "1px solid",
                        borderColor: "warning.main",
                    },
                }}
                disableColumnMenu
                rows={watch("pickLines")}
                columns={columns}
            />
        </>
    )
}

export default PickTable;