import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { UndoManager } from '../util/UndoManager';
import './UndoStack.scss';
import { StrCast } from '../../fields/Types';
import { Doc } from '../../fields/Doc';
import { Popup, Type, isDark } from 'browndash-components';
import { Colors } from './global/globalEnums';
import { SettingsManager } from '../util/SettingsManager';

interface UndoStackProps {
    width?: number;
    height?: number;
    inline?: boolean;
}
@observer
export class UndoStack extends React.Component<UndoStackProps> {
    @observable static HideInline: boolean;
    @observable static Expand: boolean;
    render() {
        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.Instance.userBackgroundColor;
        return this.props.inline && UndoStack.HideInline ? null : (
            <div className="undoStack-outerContainer">
                <Popup
                    text={'Undo/Redo Stack'}
                    color={UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userVariantColor)}
                    placement={`top-start`}
                    type={Type.TERT}
                    popup={
                        <div
                            className="undoStack-commandsContainer"
                            ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })}
                            style={{
                                background: background,
                                color: isDark(background) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
                            }}>
                            {UndoManager.undoStackNames.map((name, i) => (
                                <div className="undoStack-resultContainer" key={i}>
                                    <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
                                </div>
                            ))}
                            {Array.from(UndoManager.redoStackNames)
                                .reverse()
                                .map((name, i) => (
                                    <div className="undoStack-resultContainer" key={i}>
                                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
                                            {name.replace(/[^\.]*\./, '')}
                                        </div>
                                    </div>
                                ))}
                        </div>
                    }
                />
            </div>
        );
    }
}