path: root/src/client/views/collections/TabDocView.tsx

import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Popup, Type } from '@dash/components';
import { clamp } from 'lodash';
import { IReactionDisposer, ObservableSet, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import ResizeObserver from 'resize-observer-polyfill';
import { ClientUtils, DashColor, lightOrDark, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick } from '../../../ClientUtils';
import { emptyFunction } from '../../../Utils';
import { Doc, Opt, returnEmptyDoclist } from '../../../fields/Doc';
import { DocData, DocLayout } from '../../../fields/DocSymbols';
import { Id } from '../../../fields/FieldSymbols';
import { List } from '../../../fields/List';
import { FieldId } from '../../../fields/RefField';
import { ComputedField } from '../../../fields/ScriptField';
import { Cast, DocCast, NumCast, StrCast, toList } from '../../../fields/Types';
import { DocServer } from '../../DocServer';
import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
import { Docs } from '../../documents/Documents';
import { DragManager } from '../../util/DragManager';
import { dropActionType } from '../../util/DropActionTypes';
import { SnappingManager } from '../../util/SnappingManager';
import { Transform } from '../../util/Transform';
import { UndoManager, undoable } from '../../util/UndoManager';
import { DashboardView } from '../DashboardView';
import { LightboxView } from '../LightboxView';
import { ObservableReactComponent } from '../ObservableReactComponent';
import { PinDocView, PinProps } from '../PinFuncs';
import { StyleProp } from '../StyleProp';
import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
import { Colors } from '../global/globalEnums';
import { DocumentView } from '../nodes/DocumentView';
import { FieldViewProps } from '../nodes/FieldView';
import { KeyValueBox } from '../nodes/KeyValueBox';
import { OpenWhere, OpenWhereMod } from '../nodes/OpenWhere';
import { PresBox } from '../nodes/trails';
import { PresMovement } from '../nodes/trails/PresEnums';
import { CollectionDockingView } from './CollectionDockingView';
import { CollectionView } from './CollectionView';
import './TabDocView.scss';
import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
import { Tooltip } from '@mui/material';

interface TabMinimapViewProps {
    doc: Doc;
    tabView: () => DocumentView | undefined;
    addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
    PanelWidth: () => number;
    PanelHeight: () => number;
    background: () => string;
}
interface TabMiniThumbProps {
    miniWidth: () => number;
    miniHeight: () => number;
    miniTop: () => number;
    miniLeft: () => number;
}

export type TabHTMLElement = HTMLDivElement & { InitTab?: (tab: object) => void };
@observer
class TabMiniThumb extends React.Component<TabMiniThumbProps> {
    render() {
        const { miniWidth, miniHeight, miniLeft, miniTop } = this.props;
        return <div className="miniThumb" style={{ width: `${miniWidth()}%`, height: `${miniHeight()}%`, left: `${miniLeft()}%`, top: `${miniTop()}%` }} />;
    }
}
@observer
export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> {
    static miniStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => {
        if (doc) {
            switch (property.split(':')[0]) {
                case StyleProp.PointerEvents: return 'none';
                case StyleProp.DocContents: {
                    const background = (() => {
                        switch (doc.type as DocumentType) {
                            case DocumentType.PDF:    return 'pink';
                            case DocumentType.AUDIO:  return 'lightgreen';
                            case DocumentType.WEB:    return 'brown';
                            case DocumentType.IMG:    return 'blue';
                            case DocumentType.MAP:    return 'orange';
                            case DocumentType.VID:    return 'purple';
                            case DocumentType.RTF:    return 'yellow';
                            case DocumentType.COL:    return undefined;
                            default:                  return 'gray';
                        } // prettier-ignore
                    })();
                    return !background ? undefined : <div style={{ width: NumCast(doc._width), height: NumCast(doc._height), position: 'absolute', display: 'block', background }} />;
                }
                default: return DefaultStyleProvider(doc, props, property);
            } // prettier-ignore
        }
        return undefined;
    };

    @computed get renderBounds() {
        const cbounds = this._props.tabView()?.ComponentView?.contentBounds?.();
        const { width, height, bounds, cx, cy } = cbounds ?? { bounds: undefined, width: 0, height: 0 };
        const dim = Math.max(width, height);
        return bounds === undefined ? bounds : { l: bounds.x + width / 2 - dim / 2, t: bounds.y + height / 2 - dim / 2, cx, cy, dim };
    }
    @computed get xPadding() {
        return !this.renderBounds ? 0 : Math.max(0, this._props.PanelWidth() / NumCast(this._props.doc._freeform_scale, 1) - 2 * (this.renderBounds.cx - this.renderBounds.l));
    }
    @computed get yPadding() {
        return !this.renderBounds ? 0 : Math.max(0, this._props.PanelHeight() / NumCast(this._props.doc._freeform_scale, 1) - 2 * (this.renderBounds.cy - this.renderBounds.l));
    }
    childLayoutTemplate = () => Cast(this._props.doc.childLayoutTemplate, Doc, null);
    returnMiniSize = () => NumCast(this._props.doc._miniMapSize, 150);
    miniDown = (e: React.PointerEvent) => {
        const doc = this._props.doc;
        const miniSize = this.returnMiniSize();
        doc &&
            setupMoveUpEvents(
                this,
                e,
                action((moveEv, down: number[], delta: number[]) => {
                    const renderBounds = this.renderBounds ?? { l: 0, r: 0, t: 0, b: 0, dim: 1 };
                    doc._freeform_panX = clamp(NumCast(doc._freeform_panX) + (delta[0] / miniSize) * renderBounds.dim, renderBounds.l, renderBounds.l + renderBounds.dim);
                    doc._freeform_panY = clamp(NumCast(doc._freeform_panY) + (delta[1] / miniSize) * renderBounds.dim, renderBounds.t, renderBounds.t + renderBounds.dim);
                    return false;
                }),
                emptyFunction,
                emptyFunction
            );
    };
    popup = () => {
        const { renderBounds } = this;
        if (!renderBounds) return <div />;
        const miniWidth = () => (this._props.PanelWidth() / NumCast(this._props.doc._freeform_scale, 1) / renderBounds.dim) * 100;
        const miniHeight = () => (this._props.PanelHeight() / NumCast(this._props.doc._freeform_scale, 1) / renderBounds.dim) * 100;
        const miniLeft = () => 50 + ((NumCast(this._props.doc._freeform_panX) - renderBounds.cx) / renderBounds.dim) * 100 - miniWidth() / 2;
        const miniTop = () => 50 + ((NumCast(this._props.doc._freeform_panY) - renderBounds.cy) / renderBounds.dim) * 100 - miniHeight() / 2;
        const miniSize = this.returnMiniSize();
        return (
            <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this._props.background() }}>
                <CollectionFreeFormView
                    Document={this._props.doc}
                    docViewPath={returnEmptyDocViewList}
                    childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
                    noOverlay // don't render overlay Docs since they won't scale
                    isContentActive={emptyFunction}
                    isAnyChildContentActive={returnFalse}
                    select={emptyFunction}
                    isSelected={returnFalse}
                    dontRegisterView
                    fieldKey={Doc.LayoutDataKey(this._props.doc)}
                    addDocument={returnFalse}
                    moveDocument={returnFalse}
                    removeDocument={returnFalse}
                    PanelWidth={this.returnMiniSize}
                    PanelHeight={this.returnMiniSize}
                    ScreenToLocalTransform={Transform.Identity}
                    renderDepth={0}
                    whenChildContentsActiveChanged={emptyFunction}
                    focus={emptyFunction}
                    styleProvider={TabMinimapView.miniStyleProvider}
                    addDocTab={this._props.addDocTab}
                    // eslint-disable-next-line no-use-before-define
                    pinToPres={TabDocView.PinDoc}
                    childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyFilter}
                    childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter}
                    searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
                    fitContentsToBox={returnTrue}
                    xMargin={this.xPadding}
                    yMargin={this.yPadding}
                />
                <div className="miniOverlay" onPointerDown={this.miniDown}>
                    <TabMiniThumb miniLeft={miniLeft} miniTop={miniTop} miniWidth={miniWidth} miniHeight={miniHeight} />
                </div>
            </div>
        );
    };
    render() {
        return this._props.doc.layout !== CollectionView.LayoutString(Doc.LayoutDataKey(this._props.doc)) || this._props.doc?._type_collection !== CollectionViewType.Freeform ? null : (
            <div className="miniMap-hidden">
                <Popup icon={<FontAwesomeIcon icon="globe-asia" size="lg" />} color={SnappingManager.userVariantColor} type={Type.TERT} onPointerDown={e => e.stopPropagation()} placement="top-end" popup={this.popup} />
            </div>
        );
    }
}

interface TabDocViewProps {
    documentId: FieldId;
    keyValue?: boolean;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    glContainer: any;
}
@observer
export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
    static _allTabs = new ObservableSet<TabDocView>();
    public static AllTabDocs() {
        return Array.from(TabDocView._allTabs)
            .filter(tv => tv._document)
            .map(tv => tv._document!);
    }
    _mainCont: TabHTMLElement | null = null;
    _tabReaction: IReactionDisposer | undefined;
    _lastSelection = 0; // time when view was last selected - used to re-select views that get invalidated when selected

    /**
     * Adds a document to the presentation view
     * */
    @action
    public static PinDoc(docIn: Doc | Doc[], pinProps: PinProps) {
        const docs = toList(docIn);

        const batch = UndoManager.StartBatch('Pin doc to pres trail');
        const curPres = Doc.ActivePresentation ?? (DocCast(Doc.UserDoc().emptyTrail) ? Doc.MakeCopy(DocCast(Doc.UserDoc().emptyTrail)!, true) : Docs.Create.PresDocument({}));

        if (!Doc.ActivePresentation) {
            Doc.MyTrails && Doc.AddDocToList(Doc.MyTrails, 'data', curPres);
            Doc.ActivePresentation = curPres;
        }

        docs.forEach(doc => {
            // Edge Case 1: Cannot pin document to itself
            if (doc === curPres) {
                alert('Cannot pin presentation document to itself');
                return;
            }
            const anchorDoc = DocumentView.getDocumentView(doc)?.ComponentView?.getAnchor?.(false, pinProps);
            const pinDoc = anchorDoc?.type === DocumentType.CONFIG ? anchorDoc : Docs.Create.ConfigDocument({});
            const targDoc = (pinDoc.presentation_targetDoc = anchorDoc ?? doc);
            pinDoc.title = doc.title + ' - Slide';
            pinDoc.data = targDoc.type === DocumentType.PRES ? ComputedField.MakeFunction('copyField(this.presentation_targetDoc.data') : new List<Doc>(); // the children of the embedding's layout are the presentation slide children.  the embedding's data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
            pinDoc.presentation_movement = doc.type === DocumentType.SCRIPTING || pinProps?.pinDocLayout ? PresMovement.None : PresMovement.Zoom;
            pinDoc.presentation_duration = pinDoc.presentation_duration ?? 1000;
            pinDoc.presentation_groupWithUp = false;
            Doc.SetContainer(pinDoc, curPres);
            // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements.  That way the PresBox could configure all of its children at render time
            pinDoc.treeView = ''; // not really needed, but makes key value pane look better
            pinDoc.treeView_RenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
            pinDoc.treeView_HeaderWidth = '100%'; // forces the header to grow to be the same size as its largest sibling.
            pinDoc.treeView_FieldKey = 'data'; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
            pinDoc.treeView_ExpandedView = 'data'; // in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
            pinDoc.treeView_HideHeaderIfTemplate = true; // this will force the document to render itself as the tree view header
            const duration = NumCast(doc[`${Doc.LayoutDataKey(pinDoc)}_duration`], null);

            if (pinProps.pinViewport) PinDocView(pinDoc, pinProps, anchorDoc ?? doc);
            if (!pinProps?.audioRange && duration !== undefined) {
                pinDoc.presentation_mediaStart = 'manual';
                pinDoc.presentation_mediaStop = 'manual';
            }
            if (pinProps?.activeFrame !== undefined) {
                pinDoc.config_activeFrame = pinProps?.activeFrame;
                pinDoc.title = doc.title + ' (move)';
                pinDoc.presentation_movement = PresMovement.Pan;
            }
            if (pinProps?.currentFrame !== undefined) {
                pinDoc.config_currentFrame = pinProps?.currentFrame;
                pinDoc.title = doc.title + ' (move)';
                pinDoc.presentation_movement = PresMovement.Pan;
            }
            if (pinDoc.stroke_isInkMask) {
                pinDoc.presentation_hideAfter = true;
                pinDoc.presentation_hideBefore = true;
                pinDoc.presentation_movement = PresMovement.None;
            }
            if (curPres.expandBoolean) pinDoc.presentation_expandInlineButton = true;
            Doc.AddDocToList(curPres, 'data', pinDoc, PresBox.Instance?.sortArray()?.lastElement());
            PresBox.Instance?.clearSelectedArray();
            pinDoc && PresBox.Instance?.addToSelectedArray(pinDoc); // Update selected array
        });
        if (
            // open the presentation trail if it's not already opened
            !Array.from(CollectionDockingView.Instance?.tabMap ?? [])
                .map(d => d.DashDoc)
                .includes(curPres)
        ) {
            if (Doc.IsInMyOverlay(curPres)) Doc.RemFromMyOverlay(curPres);
            CollectionDockingView.AddSplit(curPres, OpenWhereMod.right);
            setTimeout(() => DocumentView.showDocument(docs.lastElement(), { willPan: true }), 100); // keeps the pinned doc in view since the sidebar shifts things
        }
        setTimeout(batch.end, 500); // need to wait until dockingview (goldenlayout) updates all its structurs
    }

    // Flag indicating that when a tab is activated, it should not select it's document.
    // this is used by the link properties menu when it wants to display the link target without selecting the target (which would make the link property window go away since it would no longer be selected)
    public static DontSelectOnActivate = 'dontSelectOnActivate';

    public static IsSelected = (doc?: Doc) => {
        return DocumentView.getViews(doc).some(dv => dv?.IsSelected);
    };

    static Activate = (tabDoc: Doc) => {
        const tab = Array.from(CollectionDockingView.Instance?.tabMap ?? []).find(findTab => findTab.DashDoc === tabDoc && !findTab.contentItem.config.props.keyValue);
        if (tab && tab.header.parent._activeContentItem === tab.contentItem) return false;
        tab?.header.parent.setActiveContentItem(tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
        return tab !== undefined;
    };

    get stack()           { return this._props.glContainer.parent.parent; } // prettier-ignore
    get tab()             { return this._props.glContainer.tab;  } // prettier-ignore
    get view()            { return this._view;  } // prettier-ignore

    constructor(props: TabDocViewProps) {
        super(props);
        makeObservable(this);
        DocumentView.activateTabView = TabDocView.Activate;
        DocumentView.PinDoc = TabDocView.PinDoc;
    }

    @observable _activated: boolean = false;
    @observable _panelWidth = 0;
    @observable _panelHeight = 0;
    @observable _hovering = false;
    @observable _isActive: boolean = false;
    @observable _isAnyChildContentActive = false;
    @observable _document: Doc | undefined = undefined;
    @observable _view: DocumentView | undefined = undefined;
    @observable _forceInvalidateScreenToLocal = 0; // screentolocal is computed outside of react using a dom resize ovbserver.  this hack allows the resize observer to trigger a react update

    @computed get layoutDoc() { return this._document?.[DocLayout]; } // prettier-ignore
    @computed get isUserActivated() {  return TabDocView.IsSelected(this._document) || this._isAnyChildContentActive; } // prettier-ignore
    @computed get isContentActive() { return this.isUserActivated || this._hovering; } // prettier-ignore

    @action
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    init = (tab: any, doc: Opt<Doc>) => {
        if (tab.contentItem === tab.header.parent.getActiveContentItem()) this._activated = true;
        if (tab.DashDoc !== doc && doc && tab.contentItem?.config.type !== 'stack') {
            tab._disposers = {} as { [name: string]: IReactionDisposer };
            tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true);
            tab.DashDoc = doc;
            const iconType: IconProp = Doc.toIcon(doc);
            // setup the title element and set its size according to the # of chars in the title.  Show the full title when clicked.
            const titleEle = tab.titleElement[0];
            const iconWrap = document.createElement('div');
            const closeWrap = document.createElement('div');

            const getChild = () => {
                let child = this.view?.ContentDiv?.children[0];
                while (child?.children.length) {
                    const next = Array.from(child.children).find(c => c.className?.toString().includes('SVGAnimatedString') || typeof c.className === 'string');
                    if (next?.className?.toString().includes(DocumentView.ROOT_DIV)) break;
                    if (next) child = next;
                    else break;
                }
                return child;
            };

            titleEle.size = StrCast(doc.title).length + 3;
            titleEle.value = doc.title;
            titleEle.onkeydown = (e: KeyboardEvent) => e.stopPropagation();
            titleEle.onchange = (e: InputEvent) => {
                undoable(() => {
                    const target = e.currentTarget as unknown as { value: string };
                    titleEle.size = target?.value.length + 3;
                    doc.$title = target?.value ?? '';
                }, 'edit tab title')();
            };

            if (tab.element[0].children[1].children.length === 1) {
                iconWrap.className = 'lm_iconWrap lm_moreInfo';
                const dragBtnDown = (e: React.PointerEvent) => {
                    setupMoveUpEvents(
                        this,
                        e,
                        moveEv =>
                            !moveEv.defaultPrevented &&
                            DragManager.StartDocumentDrag([iconWrap], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), moveEv.clientX, moveEv.clientY, undefined, () => {
                                CollectionDockingView.CloseSplit(doc);
                            }),
                        returnFalse,
                        action(clickEv => {
                            if (this.view) {
                                DocumentView.SelectView(this.view, false);
                                const child = getChild();
                                simulateMouseClick(child, clickEv.clientX, clickEv.clientY + 30, clickEv.screenX, clickEv.screenY + 30);
                            } else {
                                this._activated = true;
                                setTimeout(() => this.view && DocumentView.SelectView(this.view, false));
                            }
                        })
                    );
                };

                const docIcon = (
                    <>
                        <Tooltip title="click for menu, drag to embed in document">
                            <FontAwesomeIcon onPointerDown={dragBtnDown} icon={iconType} />
                        </Tooltip>
                        <Tooltip title="click to open in lightbox">
                            <FontAwesomeIcon
                                onPointerDown={dragBtnDown}
                                icon="external-link-alt"
                                onClick={() => {
                                    if (doc.layout_fieldKey === 'layout_icon') {
                                        const odoc = Doc.GetEmbeddings(doc).find(embedding => !embedding.embedContainer) ?? Doc.MakeEmbedding(doc);
                                        Doc.deiconifyView(odoc);
                                    }
                                    this.addDocTab(doc, OpenWhere.lightboxAlways);
                                }}
                            />
                        </Tooltip>
                    </>
                );
                const closeIcon = <FontAwesomeIcon icon="eye" />;
                ReactDOM.createRoot(iconWrap).render(docIcon);
                ReactDOM.createRoot(closeWrap).render(closeIcon);
                tab.reactComponents = [iconWrap, closeWrap];
                tab.element[0].prepend(iconWrap);
                tab._disposers.color = reaction(
                    () => ({ variant: SnappingManager.userVariantColor, degree: Doc.GetBrushStatus(doc), highlight: DefaultStyleProvider(this._document, undefined, StyleProp.Highlighting) }),
                    ({ variant, degree, highlight }) => {
                        const { highlightIndex, highlightColor } = (highlight as { highlightIndex: number; highlightColor: string }) ?? { highlightIndex: undefined, highlightColor: undefined };
                        const color = highlightIndex === Doc.DocBrushStatus.highlighted ? highlightColor : degree ? ['transparent', variant, variant, 'orange'][degree] : variant;

                        const textColor = color === variant ? (SnappingManager.userColor ?? '') : lightOrDark(color);
                        titleEle.style.color = textColor;
                        iconWrap.style.color = textColor;
                        closeWrap.style.color = textColor;
                        tab.element[0].style.background =
                            color === variant
                                ? DashColor(color)
                                      .fade(
                                          this.isUserActivated
                                              ? 0
                                              : this._hovering
                                                ? 0.25
                                                : degree === Doc.DocBrushStatus.selfBrushed
                                                  ? 0.5
                                                  : degree === Doc.DocBrushStatus.protoBrushed //
                                                    ? 0.7
                                                    : 0.9
                                      )
                                      .rgb()
                                      .toString()
                                : color;
                    },
                    { fireImmediately: true }
                );
            }
            // shifts the focus to this tab when another tab is dragged over it
            tab.element[0].onmouseenter = () => {
                if (SnappingManager.IsDragging && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
                    tab.header.parent.setActiveContentItem(tab.contentItem);
                    tab.setActive(true);
                }
                this._document && Doc.BrushDoc(this._document);
            };
            tab.element[0].onmouseleave = () => {
                this._document && Doc.UnBrushDoc(this._document);
            };

            tab.element[0].oncontextmenu = (e: MouseEvent) => {
                const child = getChild();
                if (child) {
                    simulateMouseClick(child, e.clientX, e.clientY + 30, e.screenX, e.screenY + 30);
                    e.stopPropagation();
                    e.preventDefault();
                }
            };

            // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected
            titleEle.onpointerdown = action((e: PointerEvent) => {
                if ((e.target as HTMLElement)?.className !== 'lm_iconWrap') {
                    if (this.view) DocumentView.SelectView(this.view, false);
                    else this._activated = true;
                    if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
                    titleEle.lastClick = Date.now();
                    document.activeElement !== titleEle && titleEle.focus();
                }
            });
            tab._disposers.selectionDisposer = reaction(
                () => TabDocView.IsSelected(this._document),
                action(selected => {
                    if (selected) this._activated = true;
                    if (selected && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
                        undoable(() => tab.header.parent.setActiveContentItem(tab.contentItem), 'tab switch')();
                    }
                }),
                { fireImmediately: true }
            );

            // highlight the tab when the tab document is brushed in any part of the UI
            tab._disposers.reactionDisposer = reaction(
                () => doc?.title,
                title => {
                    titleEle.value = title;
                },
                { fireImmediately: true }
            );

            // clean up the tab when it is closed
            tab.closeElement
                .off('click') // unbind the current click handler
                .click(() => {
                    Object.values(tab._disposers).forEach(disposer => (disposer as () => void)());
                    DocumentView.DeselectAll();
                    UndoManager.RunInBatch(() => tab.contentItem.remove(), 'delete tab');
                });
        }
    };

    componentDidMount() {
        new ResizeObserver(
            action(entries => {
                for (const entry of entries) {
                    this._panelWidth = entry.contentRect.width;
                    this._panelHeight = entry.contentRect.height;
                }
            })
        ).observe(this._props.glContainer._element[0]);
        this._props.glContainer.layoutManager.on('activeContentItemChanged', this.onActiveContentItemChanged);
        this._props.glContainer.tab?.isActive && this.onActiveContentItemChanged(undefined);
        // this._tabReaction = reaction(() => ({ selected: this.active(), title: this.tab?.titleElement[0] }),
        //     ({ selected, title }) => title && (title.style.backgroundColor = selected ? "white" : ""),
        //     { fireImmediately: true });
        runInAction(() => TabDocView._allTabs.add(this));
    }
    componentDidUpdate(prevProps: Readonly<TabDocViewProps>) {
        super.componentDidUpdate(prevProps);
        this._view && DocumentView.addView(this._view);
    }

    componentWillUnmount() {
        this._tabReaction?.();
        this._view && DocumentView.removeView(this._view);
        runInAction(() => TabDocView._allTabs.delete(this));

        this._props.glContainer.layoutManager.off('activeContentItemChanged', this.onActiveContentItemChanged);
    }

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onActiveContentItemChanged = action((contentItem: any) => {
        if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) {
            this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab;
            if (!this._view && this.tab?.contentItem?.config?.props?.panelName !== TabDocView.DontSelectOnActivate) setTimeout(() => DocumentView.SelectView(this._view, false));
            !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
        }
    });

    // adds a tab to the layout based on the locaiton parameter which can be:
    //  close[:{left,right,top,bottom}]  - e.g., "close" will close the tab, "close:left" will close the left tab,
    //  add[:{left,right,top,bottom}] - e.g., "add" will add a tab to the current stack, "add:right" will add a tab on the right
    //  replace[:{left,right,top,bottom,<any string>}] - e.g., "replace" will replace the current stack contents,
    //                                  "replace:right" - will replace the stack on the right named "right" if it exists, or create a stack on the right with that name,
    //                                   "replace:monkeys" - will replace any tab that has the label 'monkeys', or a tab with that label will be created by default on the right
    //  lightbox - will add the document to any collection along the path from the document to the docking view that has a field isLightbox. if none is found, it adds to the full screen lightbox
    addDocTab = (docsIn: Doc | Doc[], location: OpenWhere) => {
        const docs = toList(docsIn);
        DocumentView.DeselectAll();
        const whereFields = location.split(':');
        const keyValue = whereFields.includes(OpenWhereMod.keyvalue);
        const whereMods = whereFields.length > 1 ? (whereFields[1] as OpenWhereMod) : OpenWhereMod.none;
        const panelName = whereFields.length > 1 ? whereFields.lastElement() : '';
        if (docs[0]?.dockingConfig && !keyValue) return DashboardView.openDashboard(docs[0]);
        switch (whereFields[0]) {
            case undefined:
            case OpenWhere.lightbox:   return LightboxView.Instance.AddDocTab(docs[0], location);
            case OpenWhere.close:      return CollectionDockingView.CloseSplit(docs[0], whereMods);
            case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(docs[0], whereMods, this.stack, panelName, undefined, keyValue);
            case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(docs[0], whereMods, this.stack, TabDocView.DontSelectOnActivate, keyValue);
            case OpenWhere.add:default:return CollectionDockingView.AddSplit(docs[0], whereMods, this.stack, undefined, keyValue);
        } // prettier-ignore
    };
    remDocTab = (doc: Doc | Doc[]) => {
        if (doc === this._document) {
            DocumentView.DeselectAll();
            CollectionDockingView.CloseSplit(this._document);
            return true;
        }
        return false;
    };

    getCurrentFrame = () => NumCast(DocCast(PresBox.Instance.activeItem?.presentation_targetDoc)?._currentFrame);
    focusFunc = () => {
        if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) {
            this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
        }
        return undefined;
    };
    active = () => this._isActive;
    ScreenToLocalTransform = () => {
        this._forceInvalidateScreenToLocal;
        const { translateX, translateY } = ClientUtils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement);
        return CollectionDockingView.Instance?.ScreenToLocalBoxXf().translate(-translateX, -translateY) ?? Transform.Identity();
    };
    PanelWidth = () => this._panelWidth;
    PanelHeight = () => this._panelHeight;
    miniMapColor = () => Colors.MEDIUM_GRAY;
    tabView = () => this._view;
    disableMinimap = () => !this._document;
    whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive);
    isContentActiveFunc = () => this.isContentActive;
    waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined);
    renderDocView = (doc: Doc) => (
        <DocumentView
            key={doc[Id]}
            ref={action((r: DocumentView) => {
                const now = Date.now();
                this._lastSelection = this._view?.IsSelected ? now : this._lastSelection;
                if (this._view) DocumentView.removeView(this._view);
                this._view = r;
                if (this._view && now - this._lastSelection < 1000) this._view.select(false);
            })}
            renderDepth={0}
            LayoutTemplateString={this._props.keyValue ? KeyValueBox.LayoutString() : undefined}
            hideTitle={this._props.keyValue}
            Document={doc}
            TemplateDataDocument={!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined}
            waitForDoubleClickToClick={this.waitForDoubleClick}
            isContentActive={this.isContentActiveFunc}
            isDocumentActive={returnFalse}
            PanelWidth={this.PanelWidth}
            PanelHeight={this.PanelHeight}
            styleProvider={DefaultStyleProvider}
            childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyFilter}
            childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter}
            searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
            addDocument={undefined}
            removeDocument={this.remDocTab}
            addDocTab={this.addDocTab}
            suppressSetHeight={!!doc._layout_fitWidth}
            ScreenToLocalTransform={this.ScreenToLocalTransform}
            dontCenter="y"
            whenChildContentsActiveChanged={this.whenChildContentActiveChanges}
            focus={this.focusFunc}
            containerViewPath={returnEmptyDocViewList}
            pinToPres={TabDocView.PinDoc}
        />
    );

    render() {
        return (
            <div
                className="tabDocView-content"
                style={{
                    fontFamily: Doc.UserDoc().renderStyle === 'comic' ? 'Comic Sans MS' : undefined,
                }}
                onPointerOver={action(() =>  { this._hovering = true; })} // prettier-ignore
                onPointerLeave={action(() => { this._hovering = false; })} // prettier-ignore
                onDragOver={action(() =>     { this._hovering = true; })} // prettier-ignore
                onDragLeave={action(() =>    { this._hovering = false; })} // prettier-ignore
                ref={(ref: TabHTMLElement) => {
                    // "add" an InitTab function to this div to call from tabCreated in CollectionDockingView when div is reused
                    this._mainCont = ref;
                    if (this._mainCont) {
                        this._mainCont.InitTab = (tab: object) => this.init(tab, this._document);
                        DocServer.GetRefField(this._props.documentId).then(action(doc => {
                            doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document);
                        })); // prettier-ignore
                        new ResizeObserver(action(() => this._forceInvalidateScreenToLocal++)).observe(this._mainCont);
                    }
                }}>
                {!this._activated || !this._document ? null : this.renderDocView(this._document)}
                {this.disableMinimap() || !this._document ? null : (
                    <TabMinimapView key="minimap" addDocTab={this.addDocTab} PanelHeight={this.PanelHeight} PanelWidth={this.PanelWidth} background={this.miniMapColor} doc={this._document} tabView={this.tabView} />
                )}
            </div>
        );
    }
}