import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import IconButton from "@mui/material/IconButton";

export function RewardTierEditorTable({
    columns,
    disabled = false,
    emptyText = "暂无档位",
    getRowLabel = (_row, index) => `档位 ${index + 1}`,
    gridTemplateColumns,
    onRemoveTier,
    rowKey,
    rows = [],
}) {
    const tableStyle = gridTemplateColumns ? { "--reward-tier-columns": gridTemplateColumns } : undefined;

    return (
        <div className="reward-tier-editor-table" role="table" style={tableStyle}>
            <div className="reward-tier-editor-table__head" role="row">
                {columns.map((column) => (
                    <span key={column.key} role="columnheader">
                        {column.label}
                    </span>
                ))}
                <span role="columnheader">操作</span>
            </div>
            <div className="reward-tier-editor-table__body">
                {rows.map((row, index) => {
                    const label = getRowLabel(row, index);
                    return (
                        <div
                            className="reward-tier-editor-table__row"
                            key={rowKey ? rowKey(row, index) : `${row.tierId || "new"}-${index}`}
                            role="row"
                        >
                            {columns.map((column) => (
                                <div
                                    className="reward-tier-editor-table__cell"
                                    data-label={column.label}
                                    key={column.key}
                                    role="cell"
                                >
                                    {column.render(row, index)}
                                </div>
                            ))}
                            <div className="reward-tier-editor-table__cell reward-tier-editor-table__action" data-label="操作" role="cell">
                                <IconButton
                                    aria-label={`删除${label}`}
                                    disabled={disabled}
                                    size="small"
                                    onClick={() => onRemoveTier(index)}
                                >
                                    <DeleteOutlineOutlined fontSize="small" />
                                </IconButton>
                            </div>
                        </div>
                    );
                })}
                {!rows.length ? <div className="reward-tier-editor-table__empty">{emptyText}</div> : null}
            </div>
        </div>
    );
}
