"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 { useFieldArray, 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 ScheduleTable from "@/components/ScheduleTable";
import { Column } from "@/components/ScheduleTable/ScheduleTable";
import { arrayToDayjs, dayjsToDateString, decimalFormatter, integerFormatter } from "@/app/utils/formatUtil";
import { ProdScheduleLineResultByFg, ProdScheduleResult, ScheduleType } from "@/app/api/scheduling";

type Props = {
    apiRef: MutableRefObject<GridApiCommunity>
    isEdit: boolean
    type: ScheduleType
    dayPeriod: string[]
};

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


const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit, type, dayPeriod }) => {
    const {
        t,
        i18n: { language },
    } = useTranslation("schedule");

    const {
        control,
        getValues,
        formState: { errors, defaultValues, touchedFields },
    } = useFormContext<ProdScheduleResult>();

    const { fields } = useFieldArray({
        control,
        name: "prodScheduleLinesByFg"
    })
    //   const apiRef = useGridApiRef();

    console.log("%c DayPeriod: ", 'background: #222; color: #bada55', dayPeriod)

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

    const updatePagingController = (updatedObj: {
        pageNum: number;
        pageSize: number;
        totalCount: number;
        index?: number | undefined;
    }) => {
        setPagingController((prevState) => {
            return prevState.map((item, index) => {
                if (index === updatedObj?.index) {
                    return {
                        ...item,
                        pageNum: item.pageNum,
                        pageSize: item.pageSize,
                        totalCount: item.totalCount,
                    };
                }
                else
                    return item
            });
        });
    };

    const columns = useMemo<Column<ProdScheduleLineResultByFg>[]>(
        () => [
            {
                field: "code",
                label: t("code"),
                type: 'read-only',
                // editable: true,
            },
            {
                field: "name",
                label: t("name"),
                type: 'read-only',
            },
            {
                field: "type",
                label: t("type"),
                type: 'read-only',
                // editable: true,
            },
            {
                field: "availableQty",
                label: t("Available Qty"),
                type: 'read-only',
                style: {
                    textAlign: "right",
                },
                // editable: true,
                renderCell: (row) => {
                    if (typeof (row.availableQty) == "number") {
                        return decimalFormatter.format(row.availableQty)
                    }
                    return row.availableQty
                }
            },
            {
                field: "prodQty",
                label: t("Demand Qty"),
                type: 'input',
                style: {
                    textAlign: "right",
                },
                renderCell: (row) => {
                    if (typeof (row.prodQty) == "number") {
                        return decimalFormatter.format(row.prodQty ?? 0)
                    }
                    return row.prodQty
                }
            },
        ],
        []
    );

    const overallColumns = useMemo<Column<ProdScheduleLineResultByFg>[]>(
        () => [
            {
                field: "code",
                label: t("code"),
                type: 'read-only',
                // editable: true,
            },
            {
                field: "name",
                label: t("name"),
                type: 'read-only',
            },
            {
                field: "type",
                label: t("type"),
                type: 'read-only',
                renderCell: (params) => {
                    return t(params.type)
                }
                // editable: true,
            },
            {
                field: "lastMonthAvgSales",
                label: t("Last Month Average Stock"),
                type: 'read-only',
                style: {
                    textAlign: "right",
                },
                renderCell: (row) => {
                    if (typeof (row.lastMonthAvgSales) == "number") {
                        return decimalFormatter.format(row.lastMonthAvgSales)
                    }
                    return row.lastMonthAvgSales
                }
                // editable: true,
            },
            {
                field: "estCloseBal",
                label: t("Safety Stock"),
                type: 'read-only',
                style: {
                    textAlign: "right",
                },
                renderCell: (row) => {
                    if (typeof (row.estCloseBal) == "number") {
                        return decimalFormatter.format(row.estCloseBal)
                    }
                    return row.estCloseBal
                }
                // editable: true,
            },
            {
                field: "availableQty",
                label: t("Available Qty"),
                type: 'read-only',
                style: {
                    textAlign: "right",
                },
                renderCell: (row) => {
                    if (typeof (row.availableQty) == "number") {
                        return decimalFormatter.format(row.availableQty)
                    }
                    return row.availableQty
                }
                // editable: true,
            },
            {
                field: "prodQty",
                label: t("Demand Qty (7 Days)"),
                type: 'read-only',
                style: {
                    textAlign: "right",
                },
                renderCell: (row) => {
                    if (typeof (row.prodQty) == "number") {
                        return decimalFormatter.format(row.prodQty)
                    }
                    return row.prodQty
                }
            },
        ],
        []
    );

    console.log(getValues("prodScheduleLinesByFg"))

    return (
        <Grid container spacing={2}>
            <Grid item xs={12} key={"all"}>
                <Typography variant="overline" display="block" marginBlockEnd={1}>
                    {t("FG Demand List (7 Days)")}
                </Typography>
                <ScheduleTable<ProdScheduleLineResultByFg>
                    // index={7}
                    type={type}
                    items={getValues("prodScheduleLinesByFg")}
                    columns={overallColumns}
                    setPagingController={updatePagingController}
                    pagingController={pagingController[7]}
                    isAutoPaging={false}
                    isEditable={false}
                    isEdit={isEdit}
                    hasCollapse={true}
                />
            </Grid>
            {dayPeriod.map((date, index) => (
                <Grid item xs={12} key={index}>
                    <Typography variant="overline" display="block" marginBlockEnd={1}>
                        {`${t("FG Demand Date")}: ${date}`}
                    </Typography>
                    <ScheduleTable<ProdScheduleLineResultByFg>
                        type={type}
                        items={getValues("prodScheduleLinesByFgByDate")[index + 1]} // Use the corresponding records for the day
                        columns={columns}
                        setPagingController={updatePagingController}
                        pagingController={pagingController[index]}
                        isAutoPaging={false}
                        isEditable={true}
                        isEdit={isEdit}
                        hasCollapse={true}
                    />
                </Grid>
            ))}
        </Grid>
    );
};
export default ViewByFGDetails;