import { Tooltip } from '@mui/material';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { factory } from 'typescript';
import { Field } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { DocumentManager } from '../../util/DocumentManager';
import { Transformer, ts } from '../../util/Scripting';
import { SettingsManager } from '../../util/SettingsManager';
import { LightboxView } from '../LightboxView';
import { ObservableReactComponent } from '../ObservableReactComponent';
import { DocumentView } from './DocumentView';

interface DocumentIconProps {
    view: DocumentView;
    index: number;
}
@observer
export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
    @observable _hovered = false;
    constructor(props: any) {
        super(props);
        makeObservable(this);
    }

    static get DocViews() {
        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.Contains(v)) : DocumentManager.Instance.DocumentViews;
    }
    render() {
        const view = this._props.view;
        const { left, top, right, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };

        return (
            <div
                className="documentIcon-outerDiv"
                onPointerEnter={action(e => (this._hovered = true))}
                onPointerLeave={action(e => (this._hovered = false))}
                style={{
                    pointerEvents: 'all',
                    opacity: this._hovered ? 0.3 : 1,
                    position: 'absolute',
                    background: SettingsManager.userBackgroundColor,
                    transform: `translate(${(left + right) / 2}px, ${top}px)`,
                }}>
                <Tooltip title={<>{this._props.view.Document.title}</>}>
                    <p>d{this._props.index}</p>
                </Tooltip>
            </div>
        );
    }
}

@observer
export class DocumentIconContainer extends React.Component {
    public static getTransformer(): Transformer {
        const usedDocuments = new Set<number>();
        return {
            transformer: context => {
                return root => {
                    function visit(node: ts.Node) {
                        node = ts.visitEachChild(node, visit, context);

                        if (ts.isIdentifier(node)) {
                            const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
                            const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
                            const isntParameter = !ts.isParameter(node.parent);
                            if (isntPropAccess && isntPropAssign && isntParameter && !(node.text in globalThis)) {
                                const match = node.text.match(/d([0-9]+)/);
                                if (match) {
                                    const m = parseInt(match[1]);
                                    const doc = DocumentIcon.DocViews[m].Document;
                                    usedDocuments.add(m);
                                    return factory.createIdentifier(`idToDoc("${doc[Id]}")`);
                                }
                            }
                        }

                        return node;
                    }
                    return ts.visitNode(root, visit);
                };
            },
            getVars() {
                const docs = DocumentIcon.DocViews;
                const capturedVariables: { [name: string]: Field } = {};
                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].Document : `d${index}`));
                return capturedVariables;
            },
        };
    }
    render() {
        return DocumentIcon.DocViews.map((dv, i) => <DocumentIcon key={i} index={i} view={dv} />);
    }
}