"use client";

import { CreateItemInputs } from "@/app/api/settings/item/actions";
import {
    GridColDef,
    GridRowModel,
    GridRenderEditCellParams,
    GridEditInputCell,
    GridRowSelectionModel,
    useGridApiRef,
} from "@mui/x-data-grid";
import {MutableRefObject, useCallback, useMemo, useState} from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import InputDataGrid, { TableRow } from "../InputDataGrid/InputDataGrid";
import {Box, Grid, Tooltip, Typography} from "@mui/material";
import { ItemQc } from "@/app/api/settings/item";
import { QcChecksInputs } from "@/app/api/settings/qcCheck/actions";
import { GridApiCommunity } from "@mui/x-data-grid/internals";
import { RiceBowl } from "@mui/icons-material";
import EditableSearchResults, {Column} from "@/components/SearchResults/EditableSearchResults";

type Props = {
    apiRef: MutableRefObject<GridApiCommunity>
};
type EntryError =
    | {
    [field in keyof QcChecksInputs]?: string;
}
    | undefined;

export type FGRecord = {
    id: string | number
    code: string;
    name: string;
    inStockQty: number;
    purchaseQty: number;
}

const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
    const {
        t,
        i18n: { language },
    } = useTranslation();

    const {
        formState: { errors, defaultValues, touchedFields },
    } = useFormContext<CreateItemInputs>();
//   const apiRef = useGridApiRef();

    const dayPeriod = [
        '2025-05-11',
        '2025-05-12',
        '2025-05-13',
        '2025-05-14',
        '2025-05-15',
        '2025-05-16',
        '2025-05-17',
    ];

    const fakeRecords = useMemo<FGRecord[][]>(
        () => [
            [
                { id: 1,  code:  "MH0040",  name: "大豆油(1噸/桶)", inStockQty:  54.44 , purchaseQty: 544.4 },
                { id: 2,  code:  "GI3236",  name: "清水(煮過牛腩)", inStockQty:  317.52 , purchaseQty: 3175.2 },
                { id: 3,  code:  "MG1700",  name: "STERILTOM 意大利茄粒", inStockQty:  9.00 , purchaseQty: 90 },
                { id: 4,  code:  "FA0533",  name: "乾蔥茸", inStockQty:  6.04 , purchaseQty: 60.4 },
                { id: 5,  code:  "FA0210",  name: "薑茸", inStockQty:  6.04 , purchaseQty: 60.4 },
                { id: 6,  code:  "FA0608",  name: "粗蒜茸", inStockQty:  6.04 , purchaseQty: 60.4 },
                { id: 7,  code:  "FA0056",  name: "洋蔥肉", inStockQty:  241.98 , purchaseQty: 2419.8 },
                { id: 8,  code:  "PP1188",  name: "咖喱膽", inStockQty:  36.00 , purchaseQty: 360 },
                { id: 9,  code:  "PP8001",  name: "咖哩汁箱料粉", inStockQty:  77.42 , purchaseQty: 774.2 },
                { id: 10, code: "PP1096",   name: "白麵撈", inStockQty:  60.00 , purchaseQty: 600 },
                { id: 10, code: "NA0476",   name: "2磅份量三邊覆合袋 (0.1x225x260mm)個計", inStockQty:  600.00 , purchaseQty: 6000 },
                { id: 2, code: "MH0040", name: "大豆油(1噸/桶)", inStockQty: 0, purchaseQty: 20  },
                { id: 3, code: "FA0161", name: "洋蔥粒", inStockQty: 0, purchaseQty: 10  }
            ],
            [
                { id: 3, code: "mt3", name: "material 3", inStockQty: 30, purchaseQty: 3 },
                { id: 4, code: "mt4", name: "material 4", inStockQty: 40, purchaseQty: 499 },
            ],
            [
                { id: 5, code: "mt5", name: "material 5", inStockQty: 50, purchaseQty: 5 },
                { id: 6, code: "mt6", name: "material 6", inStockQty: 60, purchaseQty: 699 },
            ],
            [
                { id: 7, code: "mt7", name: "material 7", inStockQty: 70, purchaseQty: 7 },
                { id: 8, code: "mt8", name: "material 8", inStockQty: 80, purchaseQty: 899 },
            ],
            [
                { id: 9, code: "mt9", name: "material 9", inStockQty: 90, purchaseQty: 9 },
                { id: 10, code: "mt10", name: "material 10", inStockQty: 100, purchaseQty: 999 },
            ],
            [
                { id: 11, code: "mt11", name: "material 11", inStockQty: 110, purchaseQty: 11 },
                { id: 12, code: "mt12", name: "material 12", inStockQty: 120, purchaseQty: 1299 },
            ],
            [
                { id: 13, code: "mt13", name: "material 13", inStockQty: 130, purchaseQty: 13 },
                { id: 14, code: "mt14", name: "material 14", inStockQty: 140, purchaseQty: 1499 },
            ],
        ],
        []
    );

    const [pagingController, setPagingController] = useState({
        pageNum: 1,
        pageSize: 10,
        totalCount: 0,
    })

    const columns = useMemo<Column<any>[]>(
        () => [
            {
                field: "name",
                label: "name",
                type: 'read-only',
            },
            {
                field: "code",
                label: "code",
                type: 'read-only',
                // editable: true,
            },
            {
                field: "inStockQty",
                label: "In Stock Amount",
                type: 'read-only',
                // editable: true,
            },
            {
                field: "purchaseQty",
                label: "Purchase Qty",
                type: 'read-only',
            },
        ],
        []
    );

    return (
        <Grid container spacing={2}>
            {dayPeriod.map((date, index) => (
                <Grid item xs={12} key={index}>
                    <Typography variant="overline" display="block" marginBlockEnd={1}>
                        {date}
                    </Typography>
                    <EditableSearchResults<FGRecord>
                        items={fakeRecords[index]} // Use the corresponding records for the day
                        columns={columns}
                        setPagingController={setPagingController}
                        pagingController={pagingController}
                        isAutoPaging={false}
                        isHideButton={true}
                        isEdit={isEdit}
                    />
                </Grid>
            ))}
        </Grid>
    );
};
export default ViewByBomDetails;