import { Tooltip } from '@mui/material';
import { makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { factory } from 'typescript';
import { FieldType } from '../../../fields/Doc';
import { ToJavascriptString } from '../../../fields/FieldSymbols';
import { StrCast } from '../../../fields/Types';
import { Transformer, ts } from '../../util/Scripting';
import { SnappingManager } from '../../util/SnappingManager';
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: DocumentIconProps) {
        super(props);
        makeObservable(this);
    }

    render() {
        const { view } = this._props;
        const { left, top, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };

        return (
            <div
                className="documentIcon-outerDiv"
                style={{
                    pointerEvents: 'all',
                    position: 'absolute',
                    background: SnappingManager.userBackgroundColor,
                    transform: `translate(${left}px, ${bottom - (bottom - top) / 2}px)`, //**!**
                }}>
                <Tooltip title={<div>{StrCast(this._props.view.Document?.title)}</div>}>
                    <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 => root => {
                function visit(nodeIn: ts.Node) {
                    const node = ts.visitEachChild(nodeIn, 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 = DocumentView.allViews()[m].Document;
                                usedDocuments.add(m);
                                return factory.createIdentifier(doc[ToJavascriptString]()); // `idToDoc("${doc[Id]}")`);
                            }
                        }
                    }

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