import { Tooltip } from '@mui/material';
import { Popup, Type } from 'browndash-components';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { StrCast } from '../../fields/Types';
import { SettingsManager } from '../util/SettingsManager';
import { UndoManager } from '../util/UndoManager';
import './UndoStack.scss';

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.userVariantColor;
        const color = UndoManager.batchCounter.get() ? 'black' : SettingsManager.userColor;
        return this.props.inline && UndoStack.HideInline ? null : (
            <Tooltip title={'undo stack (if it stays yellow, undo is broken - you should reload Dash)'}>
                <div>
                    <div className="undoStack-outerContainer">
                        <Popup
                            text="stack"
                            color={color}
                            background={background}
                            placement={`top-start`}
                            type={Type.TERT}
                            popup={
                                <div
                                    className="undoStack-commandsContainer"
                                    ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })}
                                    style={{
                                        background,
                                        color,
                                    }}>
                                    {Array.from(UndoManager.undoStackNames).map((name, i) => (
                                        <div className="undoStack-resultContainer" key={i} 
                                             onClick={e => {
                                                const size = UndoManager.undoStackNames.length;
                                                for (let n = 0; n < size-i; n++ ) UndoManager.Undo();  } } 
                                            >
                                            <div className="undoStack-commandString">{StrCast(name).replace(/[^\.]*\./, '')}</div>
                                        </div>
                                    ))}
                                    {Array.from(UndoManager.redoStackNames)
                                        .reverse()
                                        .map((name, i) => (
                                            <div className="undoStack-resultContainer" key={i} onClick={e =>
                                                { for (let n = 0; n <= i; n++ ) UndoManager.Redo() }}>
                                                <div className="undoStack-commandString" style={{ fontWeight: 'bold', background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                                                    {StrCast(name).replace(/[^\.]*\./, '')}
                                                </div>
                                            </div>
                                        ))}
                                </div>
                            }
                        />
                    </div>
                </div>
            </Tooltip>
        );
    }
}