import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Tooltip } from '@material-ui/core';
import { action, computed, observable, reaction } from "mobx";
import { observer } from "mobx-react";
import { DateField } from '../../fields/DateField';
import { AclAdmin, AclEdit, DataSym, Doc, DocListCast, Field, HeightSym, WidthSym } from "../../fields/Doc";
import { Document } from '../../fields/documentSchemas';
import { InkField } from "../../fields/InkField";
import { ComputedField, ScriptField } from '../../fields/ScriptField';
import { Cast, FieldValue, NumCast, StrCast } from "../../fields/Types";
import { GetEffectiveAcl } from '../../fields/util';
import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../Utils";
import { Docs } from "../documents/Documents";
import { DocumentType } from '../documents/DocumentTypes';
import { CurrentUserUtils } from '../util/CurrentUserUtils';
import { DragManager } from "../util/DragManager";
import { SelectionManager } from "../util/SelectionManager";
import { SnappingManager } from '../util/SnappingManager';
import { undoBatch, UndoManager } from "../util/UndoManager";
import { CollectionDockingView } from './collections/CollectionDockingView';
import { CollectionFreeFormView } from './collections/collectionFreeForm';
import { DocumentButtonBar } from './DocumentButtonBar';
import './DocumentDecorations.scss';
import { KeyManager } from './GlobalKeyHandler';
import { InkingStroke } from './InkingStroke';
import { InkStrokeProperties } from './InkStrokeProperties';
import { LightboxView } from './LightboxView';
import { DocumentView } from "./nodes/DocumentView";
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
import { ImageBox } from './nodes/ImageBox';
import React = require("react");

@observer
export class DocumentDecorations extends React.Component<{ PanelWidth: number, PanelHeight: number, boundsLeft: number, boundsTop: number }, { value: string }> {
      static Instance: DocumentDecorations;
      private _resizeHdlId = "";
      private _keyinput = React.createRef<HTMLInputElement>();
      private _resizeBorderWidth = 16;
      private _linkBoxHeight = 20 + 3; // link button height + margin
      private _titleHeight = 20;
      private _resizeUndo?: UndoManager.Batch;
      private _offX = 0; _offY = 0;  // offset from click pt to inner edge of resize border
      private _snapX = 0; _snapY = 0; // last snapped location of resize border
      private _dragHeights = new Map<Doc, { start: number, lowest: number }>();
      private _inkDragDocs: { doc: Doc, x: number, y: number, width: number, height: number }[] = [];

      @observable private _accumulatedTitle = "";
      @observable private _titleControlString: string = "#title";
      @observable private _edtingTitle = false;
      @observable private _hidden = false;
      @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set.
      @observable public Interacting = false;
      @observable public pushIcon: IconProp = "arrow-alt-circle-up";
      @observable public pullIcon: IconProp = "arrow-alt-circle-down";
      @observable public pullColor: string = "white";

      constructor(props: any) {
            super(props);
            DocumentDecorations.Instance = this;
            reaction(() => SelectionManager.Views().slice(), action(docs => this._edtingTitle = false));
      }

      @computed
      get Bounds() {
            const views = SelectionManager.Views();
            return views.filter(dv => dv.props.renderDepth > 0).map(dv => dv.getBounds()).reduce((bounds, rect) =>
                  !rect ? bounds :
                        {
                              x: Math.min(rect.left, bounds.x),
                              y: Math.min(rect.top, bounds.y),
                              r: Math.max(rect.right, bounds.r),
                              b: Math.max(rect.bottom, bounds.b),
                              c: views.length === 1 ? rect.center : undefined
                        },
                  { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as ({ X: number, Y: number } | undefined) });
      }

      @action
      titleBlur = () => {
            this._edtingTitle = false;
            if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) {
                  this._titleControlString = this._accumulatedTitle;
            } else if (this._titleControlString.startsWith("#")) {
                  const titleFieldKey = this._titleControlString.substring(1);
                  UndoManager.RunInBatch(() => titleFieldKey && SelectionManager.Views().forEach(d => {
                        if (titleFieldKey === "title") {
                              d.dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-");
                              if (StrCast(d.rootDoc.title).startsWith("@") && !this._accumulatedTitle.startsWith("@")) {
                                    Doc.RemoveDocFromList(CurrentUserUtils.MyPublishedDocs, undefined, d.rootDoc);
                              }
                              if (!StrCast(d.rootDoc.title).startsWith("@") && this._accumulatedTitle.startsWith("@")) {
                                    Doc.AddDocToList(CurrentUserUtils.MyPublishedDocs, undefined, d.rootDoc);
                              }
                        }
                        //@ts-ignore
                        const titleField = (+this._accumulatedTitle === this._accumulatedTitle ? +this._accumulatedTitle : this._accumulatedTitle);
                        Doc.SetInPlace(d.rootDoc, titleFieldKey, titleField, true);

                        if (d.rootDoc.syncLayoutFieldWithTitle) {
                              const title = titleField.toString();
                              const curKey = Doc.LayoutFieldKey(d.rootDoc);
                              if (curKey !== title && d.dataDoc[title] === undefined) {
                                    d.rootDoc.layout = FormattedTextBox.LayoutString(title);
                                    setTimeout(() => {
                                          const val = d.dataDoc[curKey];
                                          d.dataDoc[curKey] = undefined;
                                          d.dataDoc[title] = val;
                                    });
                              }
                        }
                  }), "title blur");
            }
      }

      titleEntered = (e: React.KeyboardEvent) => {
            if (e.key === "Enter") {
                  e.stopPropagation();
                  (e.target as any).blur();
            }
      }

      @action onTitleDown = (e: React.PointerEvent): void => {
            setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, action((e) => {
                  !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
                  this._edtingTitle = true;
                  this._keyinput.current && setTimeout(this._keyinput.current.focus);
            }));
      }

      onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction);

      @action
      onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
            const dragDocView = SelectionManager.Views()[0];
            const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
            const dragData = new DragManager.DocumentDragData(SelectionManager.Views().map(dv => dv.props.Document), dragDocView.props.dropAction);
            dragData.offset = dragDocView.props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top);
            dragData.moveDocument = dragDocView.props.moveDocument;
            dragData.isDocDecorationMove = true;
            dragData.canEmbed = dragTitle;
            this._hidden = this.Interacting = true;
            DragManager.StartDocumentDrag(SelectionManager.Views().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
                  dragComplete: action(e => {
                        dragData.canEmbed && SelectionManager.DeselectAll();
                        this._hidden = this.Interacting = false;
                  }),
                  hideSource: true
            });
            return true;
      }

      _deleteAfterIconify = false;
      _iconifyBatch: UndoManager.Batch | undefined;
      onCloseClick = (forceDeleteOrIconify: boolean | undefined) => {

            const views = SelectionManager.Views().slice().filter(v => v);
            if (forceDeleteOrIconify === false && this._iconifyBatch) return;
            this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false;
            if (!this._iconifyBatch) {
                  this._iconifyBatch = UndoManager.StartBatch("iconifying");
            } else {
                  forceDeleteOrIconify = false; // can't force immediate close in the middle of iconifying -- have to wait until iconifying completes
            }
            var iconifyingCount = views.length;
            const finished = action((force?: boolean) => {
                  if ((force || --iconifyingCount === 0) && this._iconifyBatch) {
                        if (this._deleteAfterIconify) {
                              views.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
                              SelectionManager.DeselectAll();
                        }
                        this._iconifyBatch?.end();
                        this._iconifyBatch = undefined;
                  }
            });
            if (forceDeleteOrIconify) finished(forceDeleteOrIconify);
            else if (!this._deleteAfterIconify) views.forEach(dv => dv.iconify(finished));

      }
      onMaximizeDown = (e: React.PointerEvent) => {
            setupMoveUpEvents(this, e, () => {
                  DragManager.StartWindowDrag?.(e, [SelectionManager.Views().slice(-1)[0].rootDoc]);
                  return true;
            }, emptyFunction, this.onMaximizeClick, false, false);
      }

      onMaximizeClick = (e: any): void => {
            const selectedDocs = SelectionManager.Views();
            if (selectedDocs.length) {
                  if (e.ctrlKey) {    // open an alias in a new tab with Ctrl Key
                        const bestAlias = DocListCast(selectedDocs[0].props.Document.aliases).find(doc => !doc.context && doc.author === Doc.CurrentUserEmail);
                        CollectionDockingView.AddSplit(bestAlias ?? Doc.MakeAlias(selectedDocs[0].props.Document), "right");
                  } else if (e.shiftKey) {   // open centered in a new workspace with Shift Key
                        const alias = Doc.MakeAlias(selectedDocs[0].props.Document);
                        alias.context = undefined;
                        alias.x = -alias[WidthSym]() / 2;
                        alias.y = -alias[HeightSym]() / 2;
                        CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right");
                  } else if (e.altKey) {    // open same document in new tab
                        CollectionDockingView.ToggleSplit(selectedDocs[0].props.Document, "right");
                  } else {
                        var openDoc = selectedDocs[0].props.Document;
                        if (openDoc.layoutKey === "layout_icon") {
                              openDoc = DocListCast(openDoc.aliases).find(alias => !alias.context) ?? Doc.MakeAlias(openDoc);
                              Doc.deiconifyView(openDoc);
                        }
                        LightboxView.SetLightboxDoc(openDoc, undefined, selectedDocs.slice(1).map(view => view.props.Document));
                  }
            }
            SelectionManager.DeselectAll();
      }

      onIconifyClick = (): void => {
            SelectionManager.Views().forEach(dv => dv?.iconify());
            SelectionManager.DeselectAll();
      }

      onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);

      onRadiusDown = (e: React.PointerEvent): void => {
            this._resizeUndo = UndoManager.StartBatch("DocDecs set radius");
            setupMoveUpEvents(this, e, (e, down) => {
                  const dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
                  SelectionManager.Views().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
                        map(d => d.borderRounding = `${Math.max(0, dist < 3 ? 0 : dist)}px`);
                  return false;
            }, (e) => this._resizeUndo?.end(), (e) => { });
      }

      @action
      onRotateDown = (e: React.PointerEvent): void => {
            const rotateUndo = UndoManager.StartBatch("rotatedown");
            const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
            const centerPoint = !selectedInk.length ? { X: this.Bounds.x, Y: this.Bounds.y } : { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 };
            setupMoveUpEvents(this, e,
                  (e: PointerEvent, down: number[], delta: number[]) => {
                        const previousPoint = { X: e.clientX, Y: e.clientY };
                        const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
                        const angle = InkStrokeProperties.angleChange(previousPoint, movedPoint, centerPoint);
                        if (selectedInk.length) {
                              angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, centerPoint);
                        } else {
                              SelectionManager.Views().forEach(dv => dv.rootDoc._jitterRotation = NumCast(dv.rootDoc._jitterRotation) - angle * 180 / Math.PI);
                        }
                        return false;
                  },
                  () => {
                        rotateUndo?.end();
                        UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
                  },
                  emptyFunction);
      }

      @action
      onPointerDown = (e: React.PointerEvent): void => {
            DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
            this._inkDragDocs = DragManager.docsBeingDragged
                  .filter(doc => doc.type === DocumentType.INK)
                  .map(doc => {
                        if (InkStrokeProperties.Instance._lock) {
                              Doc.SetNativeHeight(doc, NumCast(doc._height));
                              Doc.SetNativeWidth(doc, NumCast(doc._width));
                        }
                        return ({ doc, x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
                  });

            setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
            this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
            this._resizeHdlId = e.currentTarget.className;
            const bounds = e.currentTarget.getBoundingClientRect();
            this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX;
            this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
            this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
            this._snapX = e.pageX;
            this._snapY = e.pageY;
            const ffviewSet = new Set<CollectionFreeFormView>();
            SelectionManager.Views().forEach(docView => {
                  const ffview = docView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
                  ffview && ffviewSet.add(ffview);
                  this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) });
            });
            Array.from(ffviewSet).map(ffview => ffview.setupDragLines(false));
      }

      onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
            const first = SelectionManager.Views()[0];
            let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY };
            var fixedAspect = Doc.NativeAspect(first.layoutDoc);
            InkStrokeProperties.Instance._lock && SelectionManager.Views().filter(dv => dv.rootDoc.type === DocumentType.INK)
                  .forEach(dv => fixedAspect = Doc.NativeAspect(dv.rootDoc));

            const resizeHdl = this._resizeHdlId.split(" ")[0];
            if (fixedAspect && (resizeHdl === "documentDecorations-bottomRightResizer" || resizeHdl === "documentDecorations-topLeftResizer")) { // need to generalize for bl and tr drag handles
                  const project = (p: number[], a: number[], b: number[]) => {
                        const atob = [b[0] - a[0], b[1] - a[1]];
                        const atop = [p[0] - a[0], p[1] - a[1]];
                        const len = atob[0] * atob[0] + atob[1] * atob[1];
                        let dot = atop[0] * atob[0] + atop[1] * atob[1];
                        const t = dot / len;
                        dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
                        return [a[0] + atob[0] * t, a[1] + atob[1] * t];
                  };
                  const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
                  const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]);
                  thisPt = DragManager.snapDragAspect(drag, fixedAspect);
            } else {
                  thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY);
            }

            move[0] = thisPt.x - this._snapX;
            move[1] = thisPt.y - this._snapY;
            this._snapX = thisPt.x;
            this._snapY = thisPt.y;
            let dragBottom = false, dragRight = false, dragBotRight = false;
            let dX = 0, dY = 0, dW = 0, dH = 0;
            switch (this._resizeHdlId.split(" ")[0]) {
                  case "": break;
                  case "documentDecorations-topLeftResizer":
                        dX = -1;
                        dY = -1;
                        dW = -move[0];
                        dH = -move[1];
                        break;
                  case "documentDecorations-topRightResizer":
                        dW = move[0];
                        dY = -1;
                        dH = -move[1];
                        break;
                  case "documentDecorations-topResizer":
                        dY = -1;
                        dH = -move[1];
                        dragBottom = true;
                        break;
                  case "documentDecorations-bottomLeftResizer":
                        dX = -1;
                        dW = -move[0];
                        dH = move[1];
                        break;
                  case "documentDecorations-bottomRightResizer":
                        dW = move[0];
                        dH = move[1];
                        dragBotRight = true;
                        break;
                  case "documentDecorations-bottomResizer":
                        dH = move[1];
                        dragBottom = true;
                        break;
                  case "documentDecorations-leftResizer":
                        dX = -1;
                        dW = -move[0];
                        break;
                  case "documentDecorations-rightResizer":
                        dW = move[0];
                        dragRight = true;
                        break;
            }

            SelectionManager.Views().forEach(action((docView: DocumentView) => {
                  if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
                  if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
                        const doc = Document(docView.rootDoc);
                        const nwidth = docView.nativeWidth;
                        const nheight = docView.nativeHeight;
                        const docheight = doc._height || 0;
                        const docwidth = doc._width || 0;
                        const width = docwidth;
                        let height = (docheight || (nheight / nwidth * width));
                        height = !height || isNaN(height) ? 20 : height;
                        const scale = docView.props.ScreenToLocalTransform().Scale;
                        const modifyNativeDim = (e.ctrlKey || doc.forceReflow) && doc.nativeDimModifiable;
                        if (nwidth && nheight) {
                              if (nwidth / nheight !== width / height && !dragBottom) {
                                    height = nheight / nwidth * width;
                              }
                              if (modifyNativeDim && !dragBottom) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction
                                    if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth;
                                    else dW = dH * nwidth / nheight;
                              }
                        }
                        let actualdW = Math.max(width + (dW * scale), 20);
                        let actualdH = Math.max(height + (dH * scale), 20);
                        const fixedAspect = (nwidth && nheight && !doc._fitWidth);
                        if (fixedAspect) {
                              if ((Math.abs(dW) > Math.abs(dH) && (!dragBottom || !modifyNativeDim)) || dragRight) {
                                    if (dragRight && modifyNativeDim) {
                                          doc._nativeWidth = actualdW / (doc._width || 1) * Doc.NativeWidth(doc);
                                    } else {
                                          if (!doc._fitWidth) {
                                                actualdH = nheight / nwidth * actualdW;
                                                doc._height = actualdH;
                                          }
                                          else if (!modifyNativeDim || dragBotRight) doc._height = actualdH;
                                    }
                                    doc._width = actualdW;
                              }
                              else {
                                    if (dragBottom && (modifyNativeDim ||
                                          (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._fitWidth))) { // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height.  But they are marked to allow their nativeHeight to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used)
                                          doc._nativeHeight = actualdH / (doc._height || 1) * Doc.NativeHeight(doc);
                                          doc._autoHeight = false;
                                    } else {
                                          if (!doc._fitWidth) {
                                                actualdW = nwidth / nheight * actualdH;
                                                doc._width = actualdW;
                                          }
                                          else if (!modifyNativeDim || dragBotRight) doc._width = actualdW;
                                    }
                                    if (!modifyNativeDim) {
                                          actualdH = Math.min(nheight / nwidth * NumCast(doc._width), actualdH);
                                          doc._height = actualdH;
                                    }
                                    else doc._height = actualdH;
                              }
                        } else {
                              dH && (doc._height = actualdH);
                              dW && (doc._width = actualdW);
                              dH && (doc._autoHeight = false);
                        }
                        doc.x = (doc.x || 0) + dX * (actualdW - docwidth);
                        doc.y = (doc.y || 0) + dY * (actualdH - docheight);
                        doc._lastModified = new DateField();
                  }
                  const val = this._dragHeights.get(docView.layoutDoc);
                  if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) });
            }));
            return false;
      }

      @action
      onPointerUp = (e: PointerEvent): void => {
            this._resizeHdlId = "";
            this.Interacting = false;
            this._resizeUndo?.end();
            SnappingManager.clearSnapLines();

            // detect autoHeight gesture and apply
            SelectionManager.Views().map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) }))
                  .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20)
                  .forEach(pair => pair.doc._autoHeight = true);
            //need to change points for resize, or else rotation/control points will fail.
            this._inkDragDocs.map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] }))
                  .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => {
                        Doc.GetProto(doc).data = new InkField(inkPts.map(ipt =>  // (new x — oldx) + newWidth * (oldxpoint /oldWidth)
                        ({
                              X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width,
                              Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height
                        })));
                        Doc.SetNativeWidth(doc, undefined);
                        Doc.SetNativeHeight(doc, undefined);
                  });
      }

      @computed
      get selectionTitle(): string {
            if (SelectionManager.Views().length === 1) {
                  const selected = SelectionManager.Views()[0];
                  if (selected.ComponentView?.getTitle?.()) {
                        return selected.ComponentView.getTitle();
                  }
                  if (this._titleControlString.startsWith("=")) {
                        return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || "";
                  }
                  if (this._titleControlString.startsWith("#")) {
                        return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
                  }
                  return this._accumulatedTitle;
            }
            return SelectionManager.Views().length > 1 ? "-multiple-" : "-unset-";
      }

      @computed get hasIcons() {
            return SelectionManager.Views().some(docView => docView.rootDoc.layoutKey === "layout_icon");
      }

      render() {
            const bounds = this.Bounds;
            const seldoc = SelectionManager.Views().slice(-1)[0];
            if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 1 || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
                  return (null);
            }
            // hide the decorations if the parent chooses to hide it or if the document itself hides it
            const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc._isGroup;
            const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle;
            const hideDocumentButtonBar = seldoc.props.hideDocumentButtonBar || seldoc.rootDoc.hideDocumentButtonBar;
            // if multiple documents have been opened at the same time, then don't show open button
            const hideOpenButton = seldoc.props.hideOpenButton || seldoc.rootDoc.hideOpenButton ||
                  SelectionManager.Views().some(docView => docView.props.Document._stayInCollection || docView.props.Document.isGroup || docView.props.Document.hideOpenButton);
            const hideDeleteButton = seldoc.props.hideDeleteButton || seldoc.rootDoc.hideDeleteButton ||
                  SelectionManager.Views().some(docView => {
                        const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
                        return docView.rootDoc.stayInCollection || (collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.rootDoc) !== AclAdmin);
                  });
            const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
                  <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
                        <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()}
                              onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(e => click!(e))))} >
                              <FontAwesomeIcon icon={icon as any} />
                        </div>
                  </Tooltip>);

            const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
            const titleArea = hideTitle ? (null) :
                  this._edtingTitle ?
                        <input ref={this._keyinput} className={`documentDecorations-title${colorScheme}`}
                              type="text" name="dynbox" autoComplete="on"
                              value={this._accumulatedTitle}
                              onBlur={e => this.titleBlur()}
                              onChange={action(e => this._accumulatedTitle = e.target.value)}
                              onKeyDown={this.titleEntered} /> :
                        <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
                              <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${this.selectionTitle}`}</span>
                        </div>;


            const leftBounds = this.props.boundsLeft;
            const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop;
            bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
            bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
            const borderRadiusDraggerWidth = 15;
            bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
            bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));

            const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
            const resizerScheme = colorScheme ? "documentDecorations-resizer" + colorScheme : "";

            const rotation = NumCast(seldoc.rootDoc._jitterRotation);

            return (<div className={`documentDecorations${colorScheme}`}>
                  <div className="documentDecorations-background" style={{
                        transform: `rotate(${rotation}deg)`,
                        transformOrigin: "top  left",
                        width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
                        height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
                        left: bounds.x - this._resizeBorderWidth / 2,
                        top: bounds.y - this._resizeBorderWidth / 2,
                        pointerEvents: DocumentDecorations.Instance.AddToSelection || this.Interacting ? "none" : "all",
                        display: SelectionManager.Views().length <= 1 ? "none" : undefined
                  }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} />
                  {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
                        <div className="documentDecorations-container" key="container" style={{
                              transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
                              transformOrigin: `8px 26px`,
                              width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
                              height: (bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight) + "px",
                        }}>
                              {hideDeleteButton ? <div /> : topBtn("close", this.hasIcons ? "times" : "window-maximize", undefined, e => this.onCloseClick(this.hasIcons ? true : undefined), "Close")}
                              {titleArea}
                              {hideOpenButton ? (null) : topBtn("open", "external-link-alt", this.onMaximizeDown, undefined, "Open in Tab (ctrl: as alias, shift: in new collection)")}
                              {hideResizers ? (null) :
                                    <>
                                          <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="l" className={`documentDecorations-leftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="c" className={`documentDecorations-centerCont ${resizerScheme}`}></div>
                                          <div key="r" className={`documentDecorations-rightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="bl" className={`documentDecorations-bottomLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
                                          <div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />

                                          {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
                                                topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")}
                                          <div key="rot" className={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`}
                                                onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown}
                                                onContextMenu={e => e.preventDefault()}>{useRotation && "⟲"}</div>
                                    </>
                              }

                              {hideDocumentButtonBar ? (null) :
                                    <div className="link-button-container" key="links"
                                          style={{
                                                transform: ` translate(${- this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
                                          }}>
                                          <DocumentButtonBar views={SelectionManager.Views} />
                                    </div>}
                        </div >
                  </>}
            </div >
            );
      }
}