FPSMS-frontend/src/components/ScheduleTable/ScheduleTable.tsx

"use client";

import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, useEffect, useState } from "react";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import IconButton from "@mui/material/IconButton";
import EditIcon from "@mui/icons-material/Edit";
import SaveIcon from "@mui/icons-material/Save";
import CancelIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import TextField from "@mui/material/TextField";
import MultiSelect from "@/components/SearchBox/MultiSelect";
import { Collapse, Typography } from "@mui/material";
import BomMaterialTable from "./BomMaterialTable";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { decimalFormatter, integerFormatter } from "@/app/utils/formatUtil";
import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
import { useTranslation } from "react-i18next";
import { ProdScheduleLineBomMaterialResult, ProdScheduleLineResultByFg, ProdScheduleResult, ScheduleType } from "@/app/api/scheduling";

export interface ResultWithId {
    id: string | number;
    // id: number;
}

interface BaseColumn<T extends ResultWithId> {
    field: keyof T;
    label: string;
    type: string;
    options?: T[];
    renderCell?: (params: T) => React.ReactNode;
    style?: Partial<HTMLElement["style"]> & { [propName: string]: string } & CSSProperties;
}

interface ColumnWithAction<T extends ResultWithId> extends BaseColumn<T> {
    onClick: (item: T) => void;
    buttonIcon: React.ReactNode;
    buttonColor?: "inherit" | "default" | "primary" | "secondary";
}

export type Column<T extends ResultWithId> =
    | BaseColumn<T>
    | ColumnWithAction<T>;

interface Props<T extends ResultWithId> {
    index?: number,
    items: T[],
    columns: Column<T>[],
    noWrapper?: boolean,
    setPagingController: (value: { pageNum: number; pageSize: number; totalCount: number, index?: number }) => void,
    pagingController: { pageNum: number; pageSize: number; totalCount: number },
    isAutoPaging: boolean,
    isEdit: boolean,
    isEditable: boolean,
    hasCollapse: boolean,
    type: ScheduleType
}

function ScheduleTable<T extends ResultWithId>({
    type,
    index = 7,
    items,
    columns,
    noWrapper,
    pagingController,
    setPagingController,
    isAutoPaging = true,
    isEdit = false,
    isEditable = true,
    hasCollapse = false,
}: Props<T>) {
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(10);
    const [editingRowId, setEditingRowId] = useState<number | null>(null);
    const [editedItems, setEditedItems] = useState<T[]>(items);
    const { t } = useTranslation("schedule");
    useEffect(() => {
        setEditedItems(items)
    }, [items])
    const handleChangePage = (_event: unknown, newPage: number) => {
        setPage(newPage);
        if (setPagingController) {
            setPagingController({ ...pagingController, pageNum: newPage + 1, index: (index ?? -1)});
        }
    };

    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
        setRowsPerPage(+event.target.value);
        setPage(0);
        if (setPagingController) {
            setPagingController({ ...pagingController, pageSize: +event.target.value, pageNum: 1, index: index });
        }
    };

    const handleEditClick = (id: number) => {
        setEditingRowId(id);
    };

    const handleSaveClick = (item: T) => {
        setEditingRowId(null);
        // Call API or any save logic here
        setEditedItems((prev) =>
            prev.map((row) => (row.id === item.id ? { ...row } : row))
        );
    };

    const handleInputChange = (id: number, field: keyof T, value: string | number[]) => {
        setEditedItems((prev) =>
            prev.map((item) =>
                item.id === id ? { ...item, [field]: value } : item
            )
        );
    };

    const handleDeleteClick = (id: number) => {
        // Implement delete logic here
        setEditedItems((prev) => prev.filter(item => item.id !== id));
    };

    useEffect(() => {
        console.log("[debug] isEdit in table", isEdit)
        //TODO: switch all record to not in edit mode and save the changes
        if (!isEdit) {
            editedItems?.forEach(item => {
                // Call save logic here
                // console.log("Saving item:", item);
                // Reset editing state if needed
            });

            setEditingRowId(null);
        }
    }, [isEdit])

    function isRoughType(
        type: ScheduleType
    ): type is "rough" {
        return type === "rough";
    }

    function isDetailType(
        type: ScheduleType
    ): type is "detail" {
        return type === "detail";
    }

    function Row(props: { row: T }) {
        const { row } = props;
        const [open, setOpen] = useState(false);
        // console.log(row)
        return (
            <>
                <TableRow hover tabIndex={-1} key={row.id}>
                    {isDetailType(type) && <TableCell>
                        <IconButton disabled={!isEdit}>
                            <PlayCircleOutlineIcon />
                        </IconButton>
                    </TableCell>}
                    {
                        (isEditable || hasCollapse) && <TableCell>
                            {(editingRowId === row.id) ? (
                                <>
                                    {
                                        isDetailType(type) && isEditable && <IconButton disabled={!isEdit} onClick={() => handleSaveClick(row)}>
                                            <SaveIcon />
                                        </IconButton>
                                    }
                                    {
                                        isDetailType(type) && isEditable && <IconButton disabled={!isEdit} onClick={() => setEditingRowId(null)}>
                                            <CancelIcon />
                                        </IconButton>
                                    }
                                    {
                                        hasCollapse && <IconButton
                                            aria-label="expand row"
                                            size="small"
                                            onClick={() => setOpen(!open)}
                                        >
                                            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                                            <Typography>{t("View BoM")}</Typography>
                                        </IconButton>
                                    }
                                </>
                            ) : (
                                <>
                                    {
                                        isDetailType(type) && isEditable && <IconButton disabled={!isEdit}
                                            onClick={() => handleEditClick(row.id as number)}>
                                            <EditIcon />
                                        </IconButton>
                                    }
                                    {
                                        isDetailType(type) && isEditable && <IconButton disabled={!isEdit}
                                            onClick={() => handleDeleteClick(row.id as number)}>
                                            <DeleteIcon />
                                        </IconButton>
                                    }
                                    {
                                        hasCollapse && <IconButton
                                            aria-label="expand row"
                                            size="small"
                                            onClick={() => setOpen(!open)}
                                        >
                                            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                                            <Typography>{t("View BoM")}</Typography>
                                        </IconButton>
                                    }
                                </>
                            )}
                        </TableCell>
                    }
                    {columns.map((column, idx) => {
                        const columnName = column.field;
                        return (
                            <TableCell key={`${columnName.toString()}-${idx}`}>
                                {editingRowId === row.id ? (
                                    (() => {
                                        switch (column.type) {
                                            case 'input':
                                                return (
                                                    <TextField
                                                        hiddenLabel={true}
                                                        fullWidth
                                                        defaultValue={row[columnName] as string}
                                                        onChange={(e) => handleInputChange(row.id as number, columnName, e.target.value)}
                                                    />
                                                );
                                            // case 'multi-select':
                                            //     //TODO: May need update if use
                                            //     return (
                                            //         <MultiSelect
                                            //             //label={column.label}
                                            //             options={column.options ?? []}
                                            //             selectedValues={[]}
                                            //             onChange={(selectedValues) => handleInputChange(row.id as number, columnName, selectedValues)}
                                            //         />
                                            //     );
                                            case 'read-only':
                                                return (
                                                    <span>
                                                        {row[columnName] as string}
                                                    </span>
                                                );
                                            default:
                                                return null; // Handle any default case if needed
                                        }
                                    })()
                                ) : (
                                    column.renderCell ?
                                        <div style={column.style}>
                                            {column.renderCell(row)}
                                        </div>
                                        :
                                        <div style={column.style}>
                                            <span onDoubleClick={() => isEdit && handleEditClick(row.id as number)}>
                                                {row[columnName] as String}
                                            </span>
                                        </div>
                                )}
                            </TableCell>
                        );
                    })}
                </TableRow>
                <TableRow>
                    {
                        hasCollapse &&
                        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
                            <Collapse in={open} timeout="auto" unmountOnExit>
                                <Table>
                                    <TableBody>
                                        <TableRow>
                                            <TableCell>
                                                <BomMaterialTable
                                                    type={type}
                                                    bomMaterial={(row as unknown as ProdScheduleLineResultByFg).bomMaterials}
                                                />
                                            </TableCell>
                                        </TableRow>
                                    </TableBody>
                                </Table>
                            </Collapse>
                        </TableCell>
                    }
                </TableRow>
            </>
        )
    }

    const table = (
        <>
            <TableContainer sx={{ maxHeight: 440 }}>
                <Table stickyHeader>
                    <TableHead>
                        <TableRow>
                            {isDetailType(type) && <TableCell>{t("Release")}</TableCell>}                            
                            {(isEditable || hasCollapse) && <TableCell>{t("Actions")}</TableCell>} {/* Action Column Header */}
                            {columns.map((column, idx) => (
                                <TableCell style={column.style} key={`${column.field.toString()}${idx}`}>
                                    {column.label}
                                </TableCell>
                            ))}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {/* {(isAutoPaging ? editedItems.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : editedItems).map((item) => ( */}
                        {(editedItems?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))?.map((item) => (
                            <Row key={item.id} row={item} />
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            <TablePagination
                rowsPerPageOptions={[10, 25, 100]}
                component="div"
                // count={pagingController.totalCount === 0 ? editedItems.length : pagingController.totalCount}
                count={editedItems?.length ?? 0}
                rowsPerPage={rowsPerPage}
                page={page}
                onPageChange={handleChangePage}
                onRowsPerPageChange={handleChangeRowsPerPage}
            />
        </>
    );

    return noWrapper ? table : <Paper sx={{ overflow: "hidden" }}>{table}</Paper>;
}

export default ScheduleTable;