import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { Collapse, TableCell, TableRow } from "@mui/material";

const DataTable_TableDetailPanel = ({
    parentRowRef,
    row,
    rowVirtualizer,
    staticRowIndex,
    table,
    virtualRow,
    ...rest
}) => {
    const {
        getState,
        getVisibleLeafColumns,
        options: {
            layoutMode,
            mrtTheme: { baseBackgroundColor },
            muiDetailPanelProps,
            muiTableBodyRowProps,
            renderDetailPanel,
        },
    } = table;
    const { isLoading } = getState();


    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
        isDetailPanel: true,
        row,
        staticRowIndex,
        table,
    });

    const tableCellProps = {
        ...parseFromValuesOrFunc(muiDetailPanelProps, {
            row,
            table,
        }),
        ...rest,
    };

    const DetailPanel = !isLoading && renderDetailPanel?.({ row, table });

    return (
        <TableRow
            className="Mui-TableBodyCell-DetailPanel"
            data-index={renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex}
            ref={(node) => {
                if (node) {
                    rowVirtualizer?.measureElement?.(node);
                }
            }}
            {...tableRowProps}
            sx={(theme) => ({
                display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
                position: virtualRow ? 'absolute' : undefined,
                top: virtualRow
                    ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
                    : undefined,
                transform: virtualRow
                    ? `translateY(${virtualRow?.start}px)`
                    : undefined,
                width: '100%',
                ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
            })}
        >
            <TableCell
                className="Mui-TableBodyCell-DetailPanel"
                colSpan={getVisibleLeafColumns().length}
                {...tableCellProps}
                sx={(theme) => ({
                    backgroundColor: virtualRow ? baseBackgroundColor : undefined,
                    borderBottom: !row.getIsExpanded() ? 'none' : undefined,
                    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
                    py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
                    transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
                    width: `100%`,
                    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
                })}
            >
                {virtualRow ? (
                    row.getIsExpanded() && DetailPanel
                ) : (
                    <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
                        {DetailPanel}
                    </Collapse>
                )}
            </TableCell>
        </TableRow>
    );

}
export default DataTable_TableDetailPanel