import { DoDetail } from "@/app/api/do/actions";
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 DoLineTable: React.FC<Props> = ({

}) => {
    const { t } = useTranslation("do")
    const {
        watch
    } = useFormContext<DoDetail>()

    const columns = useMemo<GridColDef[]>(() => [
        {
            field: "itemNo",
            headerName: t("Item No."),
            flex: 1,
        },
        {
            field: "itemName",
            headerName: t("Item Name"),
            flex: 1,
            renderCell: (row) => {
                return isEmpty(row.value) ? "N/A" : row.value
            },
        },
        {
            field: "qty",
            headerName: t("Quantity"),
            flex: 1,
            align: "right",
            headerAlign: "right",
            renderCell: (row) => {
                return decimalFormatter.format(row.value)
            },
        },
        {
            field: "price",
            headerName: t("Price"),
            flex: 1,
            align: "right",
            headerAlign: "right",
            renderCell: (row) => {
                return decimalFormatter.format(row.value)
            },
        },
        {
            field: "uomCode",
            headerName: t("UoM"),
            flex: 1,
            align: "left",
            headerAlign: "left",
            renderCell: (row) => {
                return isEmpty(row.value) ? "N/A" : row.value
            },
        },
        {
            field: "status",
            headerName: t("Status"),
            flex: 1,
            renderCell: (row) => {
                return t(upperFirst(row.value))
            },
        },
    ], [t])

    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("deliveryOrderLines")}
                columns={columns}
            />
        </>
    )
}

export default DoLineTable;