import { action, makeObservable, observable } from 'mobx';
import * as React from 'react';
import './AntimodeMenu.scss';
import { observer } from 'mobx-react';
import JsxParser from 'react-jsx-parser';

/**
 * This is an abstract class that serves as the base for a PDF-style or Marquee-style
 * menu. To use this class, look at PDFMenu.tsx or MarqueeOptionsMenu.tsx for an example.
 */
export abstract class ObservableReactComponent<T> extends React.Component<T, {}> {
    @observable _props: React.PropsWithChildren<T>;
    constructor(props: any) {
        super(props);
        this._props = props;
        makeObservable(this);
    }
    componentDidUpdate(prevProps: Readonly<T>): void {
        Object.keys(prevProps)
            .filter(pkey => (prevProps as any)[pkey] !== (this.props as any)[pkey])
            .forEach(action(pkey => {
                (this._props as any)[pkey] = (this.props as any)[pkey];
            })); // prettier-ignore
    }
}

class ObserverJsxParser1 extends JsxParser {
    constructor(props: any) {
        super(props);
        observer(this as any);
    }
}

export const ObserverJsxParser: typeof JsxParser = ObserverJsxParser1 as any;