import { Tooltip } from '@mui/material';
import { Popup, Type } from '@dash/components';
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';

@observer
export class UndoStack extends React.Component<object> {
    setRef = (r: HTMLDivElement | null) => r?.scroll({ behavior: 'auto', top: (r?.scrollHeight ?? 0) + 20 });
    render() {
        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userVariantColor;
        const color = UndoManager.batchCounter.get() ? 'black' : SettingsManager.userColor;
        return (
            <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={this.setRef}
                                    style={{
                                        background,
                                        color,
                                    }}>
                                    {Array.from(UndoManager.undoStackNames).map((name, i) => (
                                        <div
                                            className="undoStack-resultContainer"
                                            key={i}
                                            onClick={() => {
                                                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={() => {
                                                    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>
        );
    }
}