import { observer } from 'mobx-react';
import * as React from 'react';
import { UndoManager } from '../util/UndoManager';
import './ScriptingRepl.scss';

@observer
export class UndoStack extends React.Component {
    render() {
        return (
            <div className="scriptingRepl-outerContainer">
                <div className="scriptingRepl-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} style={{ background: UndoManager.batchCounter.get() ? 'yellow' : undefined }}>
                    {UndoManager.undoStackNames.map((name, i) => (
                        <div className="scriptingRepl-resultContainer" key={i}>
                            <div className="scriptingRepl-commandString">{name.replace(/[^\.]*\./, '')}</div>
                        </div>
                    ))}
                    {Array.from(UndoManager.redoStackNames)
                        .reverse()
                        .map((name, i) => (
                            <div className="scriptingRepl-resultContainer" key={i}>
                                <div className="scriptingRepl-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
                                    {name.replace(/[^\.]*\./, '')}
                                </div>
                            </div>
                        ))}
                </div>
            </div>
        );
    }
}