import { Button, Colors, EditableText, IconButton, NumberDropdown, Size, Toggle, ToggleType, Type } from '@dash/components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@mui/material';
import axios from 'axios';
import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { extname } from 'path';
import * as React from 'react';
import { AiOutlineSend } from 'react-icons/ai';
import ReactLoading from 'react-loading';
import { ClientUtils, DashColor, imageUrlToBase64, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
import { Doc, DocListCast, Opt } from '../../../fields/Doc';
import { DocData } from '../../../fields/DocSymbols';
import { Id } from '../../../fields/FieldSymbols';
import { InkTool } from '../../../fields/InkField';
import { List } from '../../../fields/List';
import { ObjectField } from '../../../fields/ObjectField';
import { ComputedField } from '../../../fields/ScriptField';
import { Cast, DocCast, ImageCast, ImageCastWithSuffix, NumCast, RTFCast, StrCast } from '../../../fields/Types';
import { ImageField } from '../../../fields/URLField';
import { TraceMobx } from '../../../fields/util';
import { emptyFunction } from '../../../Utils';
import { gptImageLabel } from '../../apis/gpt/GPT';
import { Docs } from '../../documents/Documents';
import { DocumentType } from '../../documents/DocumentTypes';
import { DocUtils, FollowLinkScript } from '../../documents/DocUtils';
import { Networking } from '../../Network';
import { DragManager } from '../../util/DragManager';
import { SettingsManager } from '../../util/SettingsManager';
import { SnappingManager } from '../../util/SnappingManager';
import { undoable, undoBatch, UndoManager } from '../../util/UndoManager';
import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
import { ViewBoxAnnotatableComponent } from '../DocComponent';
import { MarqueeAnnotator } from '../MarqueeAnnotator';
import { OverlayView } from '../OverlayView';
import { AnchorMenu } from '../pdf/AnchorMenu';
import { PinDocView, PinProps } from '../PinFuncs';
import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler';
import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
import { StickerPalette } from '../smartdraw/StickerPalette';
import { StyleProp } from '../StyleProp';
import { DocumentView } from './DocumentView';
import { FieldView, FieldViewProps } from './FieldView';
import { FocusViewOptions } from './FocusViewOptions';
import './ImageBox.scss';
import { OpenWhere } from './OpenWhere';
import { ImageUtils } from '../../util/Import & Export/ImageUtils';

const DefaultPath = '/assets/unknown-file-icon-hi.png';
export class ImageEditorData {
    private static _instance: ImageEditorData;
    private static get imageData() { return (ImageEditorData._instance ?? new ImageEditorData()).imageData; } // prettier-ignore
    @observable imageData: { rootDoc: Doc | undefined; open: boolean; source: string; addDoc: Opt<(doc: Doc | Doc[], annotationKey?: string) => boolean> } = observable({ rootDoc: undefined, open: false, source: '', addDoc: undefined });
    private static set = action((open: boolean, rootDoc: Doc | undefined, source: string, addDoc: Opt<(doc: Doc | Doc[], annotationKey?: string) => boolean>) => {
        this._instance.imageData = { open, rootDoc, source, addDoc };
    });

    constructor() {
        makeObservable(this);
        ImageEditorData._instance = this;
    }

    public static get Open()                     { return ImageEditorData.imageData.open;  } // prettier-ignore
    public static set Open(open: boolean)        { ImageEditorData.set(open, this.imageData.rootDoc, this.imageData.source, this.imageData.addDoc); } // prettier-ignore
    public static get Source()                   { return ImageEditorData.imageData.source; } // prettier-ignore
    public static set Source(source: string)     { ImageEditorData.set(this.imageData.open, this.imageData.rootDoc, source, this.imageData.addDoc); } // prettier-ignore
    public static get RootDoc()                  { return ImageEditorData.imageData.rootDoc; } // prettier-ignore
    public static set RootDoc(rootDoc: Opt<Doc>) { ImageEditorData.set(this.imageData.open, rootDoc, this.imageData.source, this.imageData.addDoc); } // prettier-ignore
    public static get AddDoc()                   { return ImageEditorData.imageData.addDoc; } // prettier-ignore
    public static set AddDoc(addDoc: Opt<(doc: Doc | Doc[], annotationKey?: string) => boolean>) { ImageEditorData.set(this.imageData.open, this.imageData.rootDoc, this.imageData.source, addDoc); } // prettier-ignore
}

const UNSPLASH_API = 'https://api.unsplash.com/search/photos';
@observer
export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(ImageBox, fieldKey);
    }
    _ffref = React.createRef<CollectionFreeFormView>();
    private _ignoreScroll = false;
    private _forcedScroll = false;
    private _dropDisposer?: DragManager.DragDropDisposer;
    private _disposers: { [name: string]: IReactionDisposer } = {};
    private _getAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined;
    private _overlayIconRef = React.createRef<HTMLDivElement>();
    private _regenerateIconRef = React.createRef<HTMLDivElement>();
    private _mainCont: HTMLDivElement | null = null;
    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
    imageRef: HTMLImageElement | null = null; // <video> ref
    marqueeref = React.createRef<MarqueeAnnotator>();
    @observable Loading = false; // bcz: this should be migrated into StylProviderQuiz since it's not fundamental to the imageBox

    @observable private _searchInput = '';
    @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>();
    @observable private _curSuffix = '';
    @observable private _error = '';
    @observable private _isHovering = false; // flag to switch between primary and alternate images on hover

    // variables for AI Image Editor
    @observable private _regenInput = '';
    @observable private _regenerateLoading = false;

    // Add these observable properties to the ImageBox class
    @observable private _outpaintingInProgress = false;
    @observable private _outpaintingPrompt = '';

    constructor(props: FieldViewProps) {
        super(props);
        makeObservable(this);
        this._props.setContentViewBox?.(this);
    }

    @computed get outpaintOriginalSize(): { width: number; height: number } {
        return {
            width: NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']),
            height: NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']),
        };
    }
    set outpaintOriginalSize(prop: { width: number; height: number } | undefined) {
        this.Document[this.fieldKey + '_outpaintOriginalWidth'] = prop?.width;
        this.Document[this.fieldKey + '_outpaintOriginalHeight'] = prop?.height;
    }

    @computed get imgNativeSize() {
        return {
            nativeWidth: NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500)),
            nativeHeight: NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500)),
        };
    }
    set imgNativeSize(prop: { nativeWidth: number; nativeHeight: number }) {
        this.dataDoc[this.fieldKey + '_nativeWidth'] = prop.nativeWidth;
        this.dataDoc[this.fieldKey + '_nativeHeight'] = prop.nativeHeight;
    }

    protected createDropTarget = (ele: HTMLDivElement) => {
        this._mainCont = ele;
        this._dropDisposer?.();
        ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
    };

    autoTag = async () => {
        if (this.Document.$tags_chat) return;
        try {
            // 1) grab the full-size URL
            const layoutKey = Doc.LayoutDataKey(this.Document);
            const url = ImageCastWithSuffix(this.Document[layoutKey], '_o');
            if (!url) throw new Error('No image URL found');

            // 2) convert to base64
            const base64 = await imageUrlToBase64(url);
            if (!base64) throw new Error('Failed to load image data');

            // 3) ask GPT for labels one label: PERSON or LANDSCAPE
            const label = await gptImageLabel(
                base64,
                `Classify this image as PERSON or LANDSCAPE.  You may only respond with one of these two options. 
                Then provide five additional descriptive tags to describe the image for a total of 6 words outputted, delimited by spaces. 
                For example: "LANDSCAPE BUNNY NATURE FOREST PEACEFUL OUTDOORS". 
                Then add one final lengthier summary tag (separated by underscores) that describes the image.`
            ).then(raw => raw.trim().toUpperCase());

            const { nativeWidth, nativeHeight } = this.nativeSize;
            const aspectRatio = ((nativeWidth || 1) / (nativeHeight || 1)).toFixed(2);

            // 5) stash it on the Doc
            //    overwrite any old tags so re-runs still work
            this.Document.$tags_chat = new List<string>([...label.split(/\s+/), `ASPECT_${aspectRatio}`]);

            // 6) flip on “show tags” in the layout
            this.Document._layout_showTags = true;
        } catch (err) {
            console.error('autoTag failed:', err);
        }
    };

    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
        const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor
        const anchor =
            visibleAnchor ??
            Docs.Create.ConfigDocument({
                title: 'ImgAnchor:' + this.Document.title,
                config_panX: NumCast(this.layoutDoc._freeform_panX),
                config_panY: NumCast(this.layoutDoc._freeform_panY),
                config_viewScale: Cast(this.layoutDoc._freeform_scale, 'number', null),
                annotationOn: this.Document,
            });
        if (anchor) {
            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
            addAsAnnotation && this.addDocument(anchor);
            PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: !visibleAnchor } }, this.Document);
            return anchor;
        }
        return this.Document;
    };

    componentDidMount() {
        this._disposers.sizer = reaction(
            () => ({
                forceFull: this._props.renderDepth < 1 || this.layoutDoc._showFullRes,
                scrSize: (NumCast(this.layoutDoc._freeform_scale, 1) / (this._props.DocumentView?.().screenToLocalScale() ?? 1)) * this._props.PanelWidth(),
                selected: this._props.isSelected(),
            }),
            ({ forceFull, scrSize, selected }) => {
                this._curSuffix = selected ? '_o' : this.fieldKey === 'icon' ? '_m' : forceFull ? '_o' : scrSize < 100 ? '_s' : scrSize < 400 ? '_m' : scrSize < 800 ? '_l' : '_o';
            },
            { fireImmediately: true, delay: 1000 }
        );
        this._disposers.path = reaction(
            () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width), height: this.layoutDoc._height }),
            ({ nativeSize, width, height }) => {
                if (!this.layoutDoc._layout_nativeDimEditable || !height || this.layoutDoc.layout_resetNativeDim) {
                    if (!this._props.TemplateDataDocument) this.layoutDoc._nativeWidth = this.layoutDoc._nativeHeight = undefined;
                    this.layoutDoc.layout_resetNativeDim = undefined; // reset dimensions of templates rendered with content or if image changes.  afterwards, remove this flag.
                    this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
                }
            },
            { fireImmediately: true }
        );
        this._disposers.scroll = reaction(
            () => this.layoutDoc.layout_scrollTop,
            sTop => {
                this._forcedScroll = true;
                !this._ignoreScroll && this._mainCont && (this._mainCont.scrollTop = NumCast(sTop));
                this._mainCont?.scrollTo({ top: NumCast(sTop) });
                this._forcedScroll = false;
            },
            { fireImmediately: true }
        );
        this._disposers.outpaint = reaction(
            () => this.outpaintOriginalSize?.width && !SnappingManager.ShiftKey,
            complete => complete && this.openOutpaintPrompt(),
            { fireImmediately: true }
        );
    }

    componentWillUnmount() {
        Object.values(this._disposers).forEach(disposer => disposer?.());
    }

    /**
     * Find images from the unsplash api to add to flashcards.
     */
    fetchImages = async () => {
        try {
            const { data } = await axios.get(`${UNSPLASH_API}?query=${this._searchInput}&page=1&per_page=${1}&client_id=${process.env.VITE_API_KEY}`);
            const imageSnapshot = Docs.Create.ImageDocument(data.results[0].urls.small, {
                _nativeWidth: Doc.NativeWidth(this.layoutDoc),
                _nativeHeight: Doc.NativeHeight(this.layoutDoc),
                x: NumCast(this.layoutDoc.x),
                y: NumCast(this.layoutDoc.y),
                onClick: FollowLinkScript(),
                _width: 150,
                _height: 150,
                title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-',
            });
            this._props.addDocument?.(imageSnapshot);
        } catch (error) {
            console.log(error);
        }
    };

    drop = undoable(
        action((e: Event, de: DragManager.DropEvent) => {
            if (de.complete.docDragData && !this._props.rejectDrop?.(de, this.DocumentView?.())) {
                let added: boolean | undefined;
                const hitDropTarget = (ele: HTMLElement, dropTarget: HTMLDivElement | null): boolean => {
                    if (!ele) return false;
                    if (ele === dropTarget) return true;
                    return hitDropTarget(ele.parentElement as HTMLElement, dropTarget);
                };
                if (de.metaKey || hitDropTarget(e.target as HTMLElement, this._overlayIconRef.current)) {
                    added = de.complete.docDragData.droppedDocuments.reduce((last: boolean, drop: Doc) => {
                        this.layoutDoc[this.fieldKey + '_usePath'] = 'alternate:hover';
                        this.Document.$backgroundColor_alternate = ComputedField.MakeFunction('this.data_alternates[0]?.$backgroundColor');
                        return last && Doc.AddDocToList(this.dataDoc, this.fieldKey + '_alternates', drop);
                    }, true);
                } else if (hitDropTarget(e.target as HTMLElement, this._regenerateIconRef.current)) {
                    this._regenerateLoading = true;
                    const drag = de.complete.docDragData.draggedDocuments.lastElement();
                    const dragField = drag[Doc.LayoutDataKey(drag)];
                    const descText = RTFCast(dragField)?.Text || StrCast(dragField) || RTFCast(drag.text)?.Text || StrCast(drag.text) || StrCast(this.Document.title);
                    const oldPrompt = StrCast(this.Document.ai_prompt, StrCast(this.Document.title));
                    const newPrompt = (text: string) => (oldPrompt ? `${oldPrompt} ~~~ ${text}` : text);
                    DrawingFillHandler.drawingToImage(this.Document, 90, newPrompt(descText), drag)?.then(action(() => (this._regenerateLoading = false)));
                    added = false;
                } else if (de.altKey || !this.dataDoc[this.fieldKey]) {
                    const dropDoc = de.complete.docDragData?.draggedDocuments[0];
                    const dropDocFieldKey = Doc.LayoutDataKey(dropDoc);
                    const dropDataDoc = dropDoc[DocData];
                    if (dropDataDoc[dropDocFieldKey] instanceof ImageField) {
                        added = true;
                        this.dataDoc.layout_resetNativeDim = true;
                        this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(dropDataDoc[dropDocFieldKey] as ImageField);
                        Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(dropDataDoc), this.fieldKey);
                        Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(dropDataDoc), this.fieldKey);
                    }
                }
                added === false && e.preventDefault();
                added !== undefined && e.stopPropagation();
                return added;
            }
            return false;
        }),
        'image drop'
    );

    @undoBatch
    resolution = () => {
        this.layoutDoc._showFullRes = !this.layoutDoc._showFullRes;
    };

    @undoBatch
    setNativeSize = action(() => {
        const oldnativeWidth = this.imgNativeSize.nativeWidth;
        const nscale = NumCast(this._props.PanelWidth()) * NumCast(this.layoutDoc._freeform_scale, 1);
        const nw = nscale / oldnativeWidth;
        this.imgNativeSize = { nativeWidth: this.imgNativeSize.nativeWidth * nw, nativeHeight: this.imgNativeSize.nativeHeight * nw };
        this.dataDoc.freeform_panX = nw * NumCast(this.dataDoc.freeform_panX);
        this.dataDoc.freeform_panY = nw * NumCast(this.dataDoc.freeform_panY);
        this.dataDoc.freeform_panX_max = this.dataDoc.freeform_panX_max ? nw * NumCast(this.dataDoc.freeform_panX_max) : undefined;
        this.dataDoc.freeform_panX_min = this.dataDoc.freeform_panX_min ? nw * NumCast(this.dataDoc.freeform_panX_min) : undefined;
        this.dataDoc.freeform_panY_max = this.dataDoc.freeform_panY_max ? nw * NumCast(this.dataDoc.freeform_panY_max) : undefined;
        this.dataDoc.freeform_panY_min = this.dataDoc.freeform_panY_min ? nw * NumCast(this.dataDoc.freeform_panY_min) : undefined;
        const newnativeWidth = this.imgNativeSize.nativeWidth;
        DocListCast(this.dataDoc[this.annotationKey]).forEach(doc => {
            doc.x = (NumCast(doc.x) / oldnativeWidth) * newnativeWidth;
            doc.y = (NumCast(doc.y) / oldnativeWidth) * newnativeWidth;
            if (!RTFCast(doc[Doc.LayoutDataKey(doc)])) {
                doc.width = (NumCast(doc.width) / oldnativeWidth) * newnativeWidth;
                doc.height = (NumCast(doc.height) / oldnativeWidth) * newnativeWidth;
            }
        });
    });
    @undoBatch
    rotate = action(() => {
        const nativeSize = this.imgNativeSize;
        const w = this.layoutDoc._width;
        const h = this.layoutDoc._height;
        this.dataDoc[this.fieldKey + '_rotation'] = (NumCast(this.dataDoc[this.fieldKey + '_rotation']) + 90) % 360;
        this.imgNativeSize = { nativeWidth: nativeSize.nativeHeight, nativeHeight: nativeSize.nativeWidth }; // swap width and height
        this.layoutDoc._width = h;
        this.layoutDoc._height = w;
    });

    crop = (region: Doc | undefined, addCrop?: boolean) => {
        if (!region) return undefined;
        const cropping = Doc.MakeCopy(region, true);
        region.$lockedPosition = true;
        region.$title = 'region:' + this.Document.title;
        region.$followLinkToggle = true;
        this.addDocument(region);
        const anchx = NumCast(cropping.x);
        const anchy = NumCast(cropping.y);
        const anchw = NumCast(cropping._width);
        const anchh = NumCast(cropping._height);
        const viewScale = this.nativeSize.nativeWidth / anchw;
        cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width);
        cropping.y = NumCast(this.Document.y);
        cropping.onClick = undefined;
        cropping._width = anchw * (this._props.NativeDimScaling?.() || 1);
        cropping._height = anchh * (this._props.NativeDimScaling?.() || 1);
        cropping.$title = 'crop: ' + this.Document.title;
        cropping.$annotationOn = undefined;
        cropping.$isDataDoc = true;
        cropping.$backgroundColor = undefined;
        cropping.$proto = Cast(this.Document.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
        cropping.$type = DocumentType.IMG;
        cropping.$layout = ImageBox.LayoutString('data');
        cropping.$data = ObjectField.MakeCopy(this.dataDoc[this.fieldKey] as ObjectField);
        cropping.$data_nativeWidth = anchw;
        cropping.$data_nativeHeight = anchh;
        cropping.$freeform_scale = viewScale;
        cropping.$freeform_panX = anchx / viewScale;
        cropping.$freeform_panY = anchy / viewScale;
        cropping.$freeform_scale_min = viewScale;
        cropping.$freeform_panX_min = anchx / viewScale;
        cropping.$freeform_panX_max = anchw / viewScale;
        cropping.$freeform_panY_min = anchy / viewScale;
        cropping.$freeform_panY_max = anchh / viewScale;
        if (addCrop) {
            DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' });
            cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width);
            cropping.y = NumCast(this.Document.y);
            this._props.addDocTab(cropping, OpenWhere.inParent);
        }
        DocumentView.addViewRenderedCb(cropping, dv => setTimeout(() => (dv.ComponentView as ImageBox).setNativeSize(), 200));
        this._props.bringToFront?.(cropping);
        return cropping;
    };
    createLoadingDoc = () => {
        const loading = Docs.Create.LoadingDocument('background removed', {
            x: NumCast(this.Document.x) + NumCast(this.Document._width),
            y: NumCast(this.Document.y),
            backgroundColor: 'transparent',
            _width: NumCast(this.Document._width),
            _height: (NumCast(this.Document._height) / (NumCast(this.Document._width) || 1)) * NumCast(this.Document._width),
            title: 'bgdRemoved:' + this.Document.title,
        });
        Doc.addCurrentlyLoading(loading);
        this._props.addDocument?.(loading);
        return loading;
    };
    replaceImage = (imgBlob: Blob | undefined, loading: Doc) => {
        const batch2 = UndoManager.StartBatch('remove mask background');
        ImageUtils.createImageDocFromBlob(imgBlob, { _nativeWidth: Doc.NativeWidth(this.Document), _nativeHeight: Doc.NativeHeight(this.Document) }, this.Document[Id] + '_fgdMask', loading).then(() => {
            Doc.removeCurrentlyLoading(loading);
            batch2.end();
        });
    };
    removeBackground = undoable(() => {
        const loading = this.createLoadingDoc();
        ImageUtils.removeImgBackground(this.Document[Id], this.choosePath(ImageCast(this.dataDoc[this.fieldKey])?.url)).then(imageBlob => this.replaceImage(imageBlob, loading));
    }, 'create image background placeholder');

    maskForeground = undoable(() => {
        const loading = this.createLoadingDoc();
        ImageUtils.maskForeground(this.Document[Id], this.choosePath(ImageCast(this.dataDoc[this.fieldKey])?.url)).then(imageBlob => this.replaceImage(imageBlob, loading));
    }, 'create image mask placeholder');

    docEditorView = () => {
        const field = Cast(this.dataDoc[this.fieldKey], ImageField);
        if (field) {
            ImageEditorData.Open = true;
            ImageEditorData.Source = this.choosePath(field.url);
            ImageEditorData.AddDoc = this._props.addDocument;
            ImageEditorData.RootDoc = this.Document;
        }
    };

    @observable _showOutpaintPrompt: boolean = false;
    @observable _outpaintPromptInput: string = 'Extend this image naturally with matching content';

    @action
    openOutpaintPrompt = () => {
        this._outpaintVAlign = '';
        this._outpaintAlign = '';
        this._showOutpaintPrompt = true;
    };

    @action
    closeOutpaintPrompt = () => {
        this._showOutpaintPrompt = false;
    };

    @action
    cancelOutpaintPrompt = () => {
        [this.Document._width, this.Document._height] = [this.outpaintOriginalSize.width, this.outpaintOriginalSize.height];
        this._outpaintingInProgress = false;
        this.outpaintOriginalSize = undefined;
        this.closeOutpaintPrompt();
    };

    @action
    handlePromptChange = (val: string | number) => (this._outpaintPromptInput = '' + val);

    @action
    submitOutpaintPrompt = () => {
        this.closeOutpaintPrompt();
        this.processOutpaintingWithPrompt(this._outpaintPromptInput);
    };

    @action
    processOutpaintingWithPrompt = async (customPrompt: string) => {
        const field = ImageCast(this.dataDoc[this.fieldKey]);
        if (!field) return;

        // Set flag that outpainting is in progress
        this._outpaintingInProgress = true;

        // Revert dimensions if prompt is blank (acts like Cancel)
        if (!customPrompt) {
            this.cancelOutpaintPrompt();
            return;
        }

        try {
            const currentPath = this.choosePath(field.url);
            const newWidth = NumCast(this.Document._width);
            const newHeight = NumCast(this.Document._height);

            // Optional: add loading indicator
            const loadingOverlay = document.createElement('div');
            loadingOverlay.style.position = 'absolute';
            loadingOverlay.style.top = '0';
            loadingOverlay.style.left = '0';
            loadingOverlay.style.width = '100%';
            loadingOverlay.style.height = '100%';
            loadingOverlay.style.background = 'rgba(0,0,0,0.5)';
            loadingOverlay.style.display = 'flex';
            loadingOverlay.style.justifyContent = 'center';
            loadingOverlay.style.alignItems = 'center';
            loadingOverlay.innerHTML = '<div style="color: white; font-size: 16px;">Generating outpainted image...</div>';
            this._mainCont?.appendChild(loadingOverlay);

            const { width: origWidth, height: origHeight } = this.outpaintOriginalSize;
            const response = await Networking.PostToServer('/outpaintImage', {
                imageUrl: currentPath,
                prompt: customPrompt,
                originalDimensions: { width: Math.min(newWidth, origWidth), height: Math.min(newHeight, origHeight) },
                newDimensions: { width: newWidth, height: newHeight },
                halignment: this._outpaintAlign,
                valignment: this._outpaintVAlign,
            });

            const error = ('error' in response && (response.error as string)) || '';
            if (error.includes('Dropbox') && confirm('Outpaint image failed. Try authorizing DropBox?\r\n' + error.replace(/^[^"]*/, ''))) {
                DrawingFillHandler.authorizeDropbox();
            } else {
                const batch = UndoManager.StartBatch('outpaint image');
                if (response && typeof response === 'object' && 'url' in response && typeof response.url === 'string') {
                    if (!this.dataDoc[this.fieldKey + '_alternates']) {
                        this.dataDoc[this.fieldKey + '_alternates'] = new List<Doc>();
                    }

                    const originalDoc = Docs.Create.ImageDocument(field.url.href, {
                        title: `Original: ${this.Document.title}`,
                        _nativeWidth: Doc.NativeWidth(this.dataDoc),
                        _nativeHeight: Doc.NativeHeight(this.dataDoc),
                    });

                    Doc.AddDocToList(this.dataDoc, this.fieldKey + '_alternates', originalDoc);

                    // Replace with new outpainted image
                    this.dataDoc[this.fieldKey] = new ImageField(response.url);

                    Doc.SetNativeWidth(this.dataDoc, newWidth);
                    Doc.SetNativeHeight(this.dataDoc, newHeight);

                    this.Document.$ai = true;
                    this.Document.$ai_outpainted = true;
                    this.Document.$ai_outpaint_prompt = customPrompt;
                    this.outpaintOriginalSize = undefined;
                } else {
                    this.cancelOutpaintPrompt();
                    alert('Failed to receive a valid image URL from server.');
                }
                batch.end();
            }

            this._mainCont?.removeChild(loadingOverlay);
        } catch (error) {
            this.cancelOutpaintPrompt();
            alert('An error occurred while outpainting.' + error);
        } finally {
            runInAction(() => (this._outpaintingInProgress = false));
        }
    };

    @observable _outpaintAlign = '';
    @observable _outpaintVAlign = '';
    @computed get outpaintVertical() {
        return this._props.PanelWidth() / this._props.PanelHeight() < this.nativeSize.nativeWidth / this.nativeSize.nativeHeight;
    }

    isOutpaintable = () => true;

    componentUI = (/* boundsLeft: number, boundsTop: number*/) =>
        !this._showOutpaintPrompt ? null : (
            <div
                key="imageBox-componentui"
                className="imageBox-regenerate-dialog"
                style={{
                    top: -70 + (this._props.DocumentView?.().getBounds?.top ?? 0),
                    left: this._props.DocumentView?.().getBounds?.left ?? 0,
                    backgroundColor: SettingsManager.userBackgroundColor,
                    color: SettingsManager.userColor,
                }}>
                <div style={{ position: 'absolute', top: 5, right: 5 }}>
                    <IconButton type={Type.TERT} onClick={this.cancelOutpaintPrompt} icon={<FontAwesomeIcon icon="times" color={'red'} />} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} />
                </div>
                <div>Outpaint Image</div>
                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                    <EditableText
                        placeholder="Enter a prompt for extending the image:"
                        setVal={val => this.handlePromptChange(val)}
                        val={this._outpaintPromptInput}
                        type={Type.TERT}
                        color={SettingsManager.userColor}
                        background={SettingsManager.userBackgroundColor}
                    />
                    <div className="buttons" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                        <IconButton type={Type.TERT} onClick={this.submitOutpaintPrompt} icon={<AiOutlineSend />} color={SnappingManager.userColor} background={SnappingManager.userVariantColor} />
                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                            {this.outpaintVertical ? null : (
                                <Toggle
                                    type={Type.TERT}
                                    toggleType={ToggleType.BUTTON}
                                    toggleStatus={this._outpaintAlign === 'left' && this._outpaintVAlign === ''}
                                    onClick={action(() => (this._outpaintAlign = 'left'))}
                                    icon={<FontAwesomeIcon icon="chevron-left" color={SnappingManager.userColor} />}
                                    color={SnappingManager.userColor}
                                    background={SnappingManager.userVariantColor}
                                />
                            )}
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                                {!this.outpaintVertical ? null : (
                                    <Toggle
                                        type={Type.TERT}
                                        toggleType={ToggleType.BUTTON}
                                        toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === 'top'}
                                        onClick={action(() => (this._outpaintVAlign = 'top'))}
                                        icon={<FontAwesomeIcon icon="chevron-up" color={SnappingManager.userColor} />}
                                        color={SnappingManager.userColor}
                                        background={SnappingManager.userColor}
                                    />
                                )}
                                <Toggle
                                    type={Type.TERT}
                                    toggleType={ToggleType.BUTTON}
                                    toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === ''}
                                    onClick={action(() => {
                                        this._outpaintAlign = '';
                                        this._outpaintVAlign = '';
                                    })}
                                    icon={<FontAwesomeIcon icon="bullseye" color={SnappingManager.userColor} />}
                                    color={SnappingManager.userColor}
                                    background={SnappingManager.userColor}
                                />
                                {!this.outpaintVertical ? null : (
                                    <Toggle
                                        type={Type.TERT}
                                        toggleType={ToggleType.BUTTON}
                                        toggleStatus={this._outpaintAlign === '' && this._outpaintVAlign === 'bottom'}
                                        onClick={action(() => (this._outpaintVAlign = 'bottom'))}
                                        icon={<FontAwesomeIcon icon="chevron-down" color={SnappingManager.userColor} />}
                                        color={SnappingManager.userColor}
                                        background={SnappingManager.userColor}
                                    />
                                )}
                            </div>
                            {this.outpaintVertical ? null : (
                                <Toggle
                                    type={Type.TERT}
                                    toggleType={ToggleType.BUTTON}
                                    toggleStatus={this._outpaintAlign === 'right' && this._outpaintVAlign === ''}
                                    onClick={action(() => (this._outpaintAlign = 'right'))}
                                    icon={<FontAwesomeIcon icon="chevron-right" color={SnappingManager.userColor} />}
                                    color={SnappingManager.userColor}
                                    background={SnappingManager.userColor}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>
        );

    specificContextMenu = (): void => {
        const field = ImageCast(this.dataDoc[this.fieldKey]);
        if (field) {
            const funcs: ContextMenuProps[] = [];
            funcs.push({ description: 'Rotate Clockwise 90', event: this.rotate, icon: 'redo-alt' });
            funcs.push({ description: `Show ${this.layoutDoc._showFullRes ? 'Dynamic Res' : 'Full Res'}`, event: this.resolution, icon: 'expand' });
            funcs.push({ description: 'Set Native Pixel Size', event: this.setNativeSize, icon: 'expand-arrows-alt' });
            funcs.push({ description: 'GetImageText',  event: () => {
                    Networking.PostToServer('/queryFireflyImageText', {
                        file: (file => {
                            const ext = file ? extname(file) : '';
                            return file?.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
                        })(field.url.href),
                    }).then(text => alert(text));
                },
                icon: 'expand-arrows-alt',
            }); // prettier-ignore
            funcs.push({ description: 'Copy path', event: () => ClientUtils.CopyText(this.choosePath(field.url)), icon: 'copy' });
            funcs.push({ description: 'Open Image Editor', event: this.docEditorView, icon: 'pencil-alt' });
            funcs.push({ description: 'Remove Background', event: this.removeBackground, icon: 'pencil-alt' });
            funcs.push({ description: 'Mask Foreground', event: this.maskForeground, icon: 'pencil-alt' });
            this.layoutDoc.ai &&
                funcs.push({
                    description: 'Regenerate AI Image',
                    event: action(() => {
                        if (!SmartDrawHandler.Instance.ShowRegenerate && this.DocumentView) {
                            const [x, y] = this.DocumentView().screenToViewTransform().inverse().transformPoint(NumCast(this.Document.width), 0);
                            this._props.docViewPath().slice(-2)[0]?.ComponentView?.showSmartDraw?.(x, y, true);
                        } else {
                            SmartDrawHandler.Instance.hideRegenerate();
                        }
                    }),
                    icon: 'pen-to-square',
                });
            funcs.push({
                description: this.Document.savedAsSticker ? 'Sticker Saved!' : 'Save to Stickers',
                event: action(undoable(async () => await StickerPalette.addToPalette(this.Document), 'save to palette')),
                icon: this.Document.savedAsSticker ? 'clipboard-check' : 'file-arrow-down',
            });
            // Add new outpainting option
            funcs.push({ description: 'Outpaint Image', event: () => this.openOutpaintPrompt(), icon: 'brush' });

            // Add outpainting history option if the image was outpainted
            this.Document.ai_outpainted &&
                funcs.push({
                    description: 'View Original Image',
                    event: action(() => {
                        const alternates = DocListCast(this.dataDoc[this.fieldKey + '_alternates']);
                        if (alternates && alternates.length) {
                            // Toggle to show the original image
                            this.layoutDoc[this.fieldKey + '_usePath'] = 'alternate';
                        }
                    }),
                    icon: 'image',
                });
            ContextMenu.Instance?.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
        }
    };

    // updateIcon = () => new Promise<void>(res => res());
    updateIcon = (/* usePanelDimensions?: boolean */) =>
        !this._mainCont || !DocListCast(this.dataDoc[this.annotationKey]).length
            ? new Promise<void>(res => res())
            : UpdateIcon(
                  this.layoutDoc[Id] + '_icon_' + new Date().getTime(),
                  this._mainCont,
                  this._props.PanelWidth(), // usePanelDimensions ? this._props.PanelWidth() : NumCast(this.layoutDoc._width),
                  this._props.PanelHeight(), // usePanelDimensions ? this._props.PanelHeight() : NumCast(this.layoutDoc._height),
                  this._props.PanelWidth(),
                  this._props.PanelHeight(),
                  0,
                  1,
                  false,
                  '',
                  (iconFile, nativeWidth, nativeHeight) => {
                      this.dataDoc.icon = new ImageField(iconFile);
                      this.dataDoc.icon_nativeWidth = nativeWidth;
                      this.dataDoc.icon_nativeHeight = nativeHeight;
                  }
              );

    choosePath = (url: URL | undefined) => {
        if (!url?.href) return '';
        const lower = url.href.toLowerCase();
        if (url.protocol === 'data') return url.href;
        if (url.href.indexOf(window.location.origin) === -1 && url.href.indexOf('dashblobstore') === -1) return ClientUtils.CorsProxy(url.href);
        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower) || lower.endsWith(DefaultPath)) return DefaultPath;

        const ext = extname(url.href);
        return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
    };
    getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc.freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);

    @computed get usingAlternate() {
        const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
        return 'alternate' === usePath || ('alternate:hover' === usePath && this._isHovering) || (':hover' === usePath && !this._isHovering);
    }

    @computed get nativeSize() {
        TraceMobx();
        if (this.paths[0]?.includes(DefaultPath) && this.layoutDoc._height) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
        const { nativeWidth, nativeHeight } = this.imgNativeSize;
        const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1);
        return { nativeWidth, nativeHeight, nativeOrientation };
    }
    private _sideBtnWidth = 35;
    /**
     * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
     */
    @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.()??1); } // prettier-ignore
    /**
     * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
     */
    @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth, 0.2 * this._props.PanelWidth())*this.viewScaling; } // prettier-ignore
    /**
     * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
     */
    @computed get uiBtnScaling() { return Math.min(1/(this._props.NativeDimScaling?.()??1), this.maxWidgetSize / this._sideBtnWidth); } // prettier-ignore

    @computed get overlayImageIcon() {
        const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`];
        return this._regenerateLoading ? null : (
            <Tooltip
                title={
                    <div className="dash-tooltip">
                        toggle between
                        <span style={{ color: usePath === undefined ? 'black' : undefined }}>
                            <em> primary, </em>
                        </span>
                        <span style={{ color: usePath === 'alternate' ? 'black' : undefined }}>
                            <em>alternate, </em>
                        </span>
                        <span style={{ color: usePath === 'alternate:hover' ? 'black' : undefined }}>
                            <em> alternate on hover</em>
                        </span>
                        and show
                        <span style={{ color: usePath === ':hover' ? 'black' : undefined }}>
                            <em> primary on hover</em>
                        </span>
                    </div>
                }>
                <div
                    className="imageBox-alternateDropTarget"
                    ref={this._overlayIconRef}
                    onPointerDown={e =>
                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
                            this.layoutDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : usePath === 'alternate:hover' ? ':hover' : undefined;
                        })
                    }
                    style={{
                        display: this._props.isContentActive() && (SnappingManager.CanEmbed || this.dataDoc[this.fieldKey + '_alternates']) ? 'block' : 'none',
                        transform: `scale(${this.uiBtnScaling})`,
                        width: this._sideBtnWidth,
                        height: this._sideBtnWidth,
                        background: usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray',
                        color: usePath === undefined ? 'black' : 'white',
                    }}>
                    <FontAwesomeIcon icon="circle-half-stroke" size="lg" />
                </div>
            </Tooltip>
        );
    }
    @computed get regenerateImageIcon() {
        return this._regenerateLoading ? null : (
            <Tooltip title={'click to show AI generations.  Drop an image on to create a new generation'}>
                <div
                    className="imageBox-regenerateDropTarget"
                    ref={this._regenerateIconRef}
                    onClick={() => DocCast(this.Document.ai_generatedDocs) && DocumentView.showDocument(DocCast(this.Document.ai_generatedDocs)!, { openLocation: OpenWhere.addRight })}
                    style={{
                        display: (this._props.isContentActive() && (SnappingManager.CanEmbed || this.Document.ai_generatedDocs)) || this._regenerateLoading ? 'block' : 'none',
                        transform: `scale(${this.uiBtnScaling})`,
                        width: this._sideBtnWidth,
                        height: this._sideBtnWidth,
                        background: 'black',
                        color: 'white',
                        // color: SettingsManager.userBackgroundColor,
                    }}>
                    {this._regenerateLoading ? <ReactLoading type="spin" width="100%" height="100%" /> : <FontAwesomeIcon icon="portrait" size="lg" />}
                </div>
            </Tooltip>
        );
    }

    @computed get paths() {
        const field = ImageCast(this.dataDoc[this.fieldKey], new ImageField(StrCast(this.dataDoc[this.fieldKey]))); // retrieve the primary image URL that is being rendered from the data doc
        const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
        const defaultUrl = new URL(ClientUtils.prepend(DefaultPath));
        const altpaths =
            alts
                ?.map(doc => (doc instanceof Doc ? (ImageCast(doc[Doc.LayoutDataKey(doc)])?.url ?? defaultUrl) : defaultUrl))
                .filter(url => url)
                .map(url => this.choosePath(url)) ?? []; // acc  ess the primary layout data of the alternate documents
        const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
        return paths.length ? paths.reverse() : [defaultUrl.href];
    }

    @computed get content() {
        TraceMobx();

        const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
        const alternate = '_' + usePath.replace(':hover', '');
        const altColor = DashColor(StrCast(this.Document[this.fieldKey + alternate], StrCast(this.Document['$backgroundColor' + alternate], 'black')));

        const backColor = DashColor((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string) ?? Colors.WHITE);
        // allow use case where the image is transparent when the alpha value is to smallest possible value from UI (alpha = 1 out of 255)
        const backAlpha = backColor.alpha() < 0.015 && backColor.alpha() > 0 ? backColor.alpha() : 1;
        const fadepath = this.layoutDoc.hideImage ? '' : this.paths[0];
        const srcpath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
        const { nativeWidth, nativeHeight /* , nativeOrientation */ } = this.nativeSize;
        const rotation = NumCast(this.dataDoc[this.fieldKey + '_rotation']);
        const aspect = rotation % 180 ? nativeHeight / nativeWidth : 1;
        let transformOrigin = 'center center';
        let transform = `translate(0%, 0%) rotate(${rotation}deg) scale(${aspect})`;
        if (rotation === 90 || rotation === -270) {
            transformOrigin = 'top left';
            transform = `translate(100%, 0%) rotate(${rotation}deg) scale(${aspect})`;
        } else if (rotation === 180) {
            transform = `rotate(${rotation}deg) scale(${aspect})`;
        } else if (rotation === 270 || rotation === -90) {
            transformOrigin = 'right top';
            transform = `translate(-100%, 0%) rotate(${rotation}deg) scale(${aspect})`;
        }

        return (
            <div
                className="imageBox-cont"
                onPointerEnter={action(() => {
                    this._isHovering = true;
                })}
                onPointerLeave={action(() => {
                    this._isHovering = false;
                })}
                key={this.layoutDoc[Id]}
                onPointerDown={this.marqueeDown}>
                <div
                    className="imageBox-fader"
                    style={{
                        opacity: backAlpha,
                        flexDirection: this._outpaintVAlign ? 'row' : 'column',
                        alignItems: this._outpaintAlign === 'left' || this._outpaintVAlign === 'top' ? 'flex-start' : this._outpaintAlign === 'right' || this._outpaintVAlign === 'bottom' ? 'flex-end' : undefined,
                    }}>
                    <img
                        alt=""
                        ref={action((r: HTMLImageElement | null) => (this.imageRef = r))}
                        key="paths"
                        src={srcpath}
                        style={{
                            position: 'relative',
                            transform,
                            transformOrigin,
                            width: this._outpaintAlign ? 'max-content' : this._outpaintAlign ? '100%' : undefined,
                            height: this._outpaintVAlign ? 'max-content' : this.outpaintOriginalSize?.width ? '100%' : undefined,
                        }}
                        onError={action(e => (this._error = e.toString()))}
                        draggable={false}
                        width={nativeWidth}
                    />
                    {fadepath === srcpath ? null : (
                        <div
                            className={`imageBox-fadeBlocker${!this.usingAlternate ? '-hover' : ''}`}
                            style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms'), background: altColor.alpha() === 0 ? 'transparent' : altColor.toString() }}>
                            <img alt="" className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
                        </div>
                    )}
                </div>
            </div>
        );
    }

    protected _btnWidth = 50;
    protected _inputWidth = 50;
    protected _sideBtnMaxPanelPct = 0.12;
    @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
    @observable private _fireflyRefStrength = 0;

    componentAIView = () => {
        return (
            <div className="imageBox-aiView">
                <div className="imageBox-aiView-regenerate">
                    <input
                        style={{ color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
                        className="imageBox-aiView-input"
                        aria-label="Edit instructions input"
                        type="text"
                        value={this._regenInput || StrCast(this.Document.title)}
                        onChange={action(e => (this._regenInput = e.target.value))}
                        placeholder={this._regenInput || StrCast(this.Document.title)}
                    />
                    <div className="imageBox-aiView-regenerate-createBtn">
                        <Button
                            text="Create"
                            type={Type.TERT}
                            size={Size.XSMALL}
                            color={SnappingManager.userColor}
                            background={SnappingManager.userBackgroundColor}
                            // style={{ alignSelf: 'flex-end' }}
                            icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                            iconPlacement="right"
                            onClick={action(() => {
                                this._regenerateLoading = true;
                                DrawingFillHandler.drawingToImage(this.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title))?.then(action(() => (this._regenerateLoading = false)));
                            })}
                        />
                    </div>
                    <div>
                        <NumberDropdown
                            color={SnappingManager.userColor}
                            background={SnappingManager.userBackgroundColor}
                            numberDropdownType="slider"
                            showPlusMinus={false}
                            formLabel="similarity"
                            tooltip="structure similarity of created images to current image"
                            type={Type.PRIM}
                            width={75}
                            min={0}
                            max={100}
                            number={this._fireflyRefStrength}
                            size={Size.XXSMALL}
                            setNumber={undoable(
                                action(val => (this._fireflyRefStrength = val as number)),
                                `${this.Document.title} button set from list`
                            )}
                            fillWidth
                        />
                    </div>
                </div>
            </div>
        );
    };

    @computed get annotationLayer() {
        TraceMobx();
        return <div className="imageBox-annotationLayer" style={{ height: this._props.PanelHeight() }} ref={this._annotationLayer} />;
    }
    screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop) * this.ScreenToLocalBoxXf().Scale);
    marqueeDown = (e: React.PointerEvent) => {
        if (!e.altKey && e.button === 0) {
            if (NumCast(this.layoutDoc._freeform_scale, 1) <= NumCast(this.dataDoc.freeform_scaleMin, 1) && this._props.isContentActive() && Doc.ActiveTool !== InkTool.Ink) {
                setupMoveUpEvents(
                    this,
                    e,
                    action(moveEv => {
                        MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
                        this.marqueeref.current?.onInitiateSelection([moveEv.clientX, moveEv.clientY]);
                        return true;
                    }),
                    returnFalse,
                    () => {
                        if (!this.dataDoc[this.fieldKey]) this.chooseImage();
                        else MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
                    },
                    false
                );
            }
        }
    };
    @action
    finishMarquee = () => {
        this._getAnchor = AnchorMenu.Instance?.GetAnchor;
        this._props.styleProvider?.(this.Document, this._props, StyleProp.AnchorMenuItems);
        AnchorMenu.Instance.addToCollection = this._props.DocumentView?.()._props.addDocument;
        AnchorMenu.Instance.marqueeWidth = this.marqueeref.current?.Width ?? 0;
        AnchorMenu.Instance.marqueeHeight = this.marqueeref.current?.Height ?? 0;
        this.marqueeref.current?.onTerminateSelection();
        this._props.select(false);
    };
    focus = (anchor: Doc, options: FocusViewOptions) => (anchor.type === DocumentType.CONFIG ? undefined : this._ffref.current?.focus(anchor, options));

    renderedPixelDimensions = async () => {
        const res = await Networking.PostToServer('/inspectImage', { source: this.paths[0] });
        const { nativeWidth: width, nativeHeight: height } = res as { nativeWidth: number; nativeHeight: number };
        return { width, height };
    };
    savedAnnotations = () => this._savedAnnotations;
    showBorderRounding = returnTrue;
    rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView | undefined) => (this.dataDoc[this.fieldKey] === undefined ? true : (this._props.rejectDrop?.(de, subView) ?? false));
    render() {
        TraceMobx();
        const borderRadius = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string;
        return (
            <>
                <div
                    className="imageBox"
                    onContextMenu={this.specificContextMenu}
                    ref={this.createDropTarget}
                    onScroll={action(() => {
                        if (!this._forcedScroll) {
                            if (this.layoutDoc._layout_scrollTop || this._mainCont?.scrollTop) {
                                this._ignoreScroll = true;
                                this.layoutDoc._layout_scrollTop = this._mainCont?.scrollTop;
                                this._ignoreScroll = false;
                            }
                        }
                    })}
                    style={{
                        width: this._props.PanelWidth() ? undefined : `100%`,
                        height: this._props.PanelHeight() ? undefined : `100%`,
                        pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
                        borderRadius,
                        overflow: this.layoutDoc.layout_fitWidth || this._props.fitWidth?.(this.Document) ? 'auto' : 'hidden',
                    }}>
                    <CollectionFreeFormView
                        ref={this._ffref}
                        {...this._props}
                        Document={this.Document}
                        setContentViewBox={emptyFunction}
                        NativeWidth={returnZero}
                        NativeHeight={returnZero}
                        renderDepth={this._props.renderDepth + 1}
                        fieldKey={this.annotationKey}
                        styleProvider={this._props.styleProvider}
                        isAnnotationOverlay
                        annotationLayerHostsContent
                        PanelWidth={this._props.PanelWidth}
                        PanelHeight={this._props.PanelHeight}
                        ScreenToLocalTransform={this.screenToLocalTransform}
                        select={emptyFunction}
                        focus={this.focus}
                        rejectDrop={this.rejectDrop}
                        getScrollHeight={this.getScrollHeight}
                        NativeDimScaling={returnOne}
                        isAnyChildContentActive={returnFalse}
                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                        removeDocument={this.removeDocument}
                        moveDocument={this.moveDocument}
                        addDocument={this.addDocument}>
                        {this.content}
                    </CollectionFreeFormView>
                    {this.Loading ? (
                        <div className="loading-spinner" style={{ position: 'absolute' }}>
                            <ReactLoading type="spin" height={50} width={50} color={'blue'} />
                        </div>
                    ) : null}
                    {this.regenerateImageIcon}
                    {this.overlayImageIcon}
                    {this.annotationLayer}
                    {!this._mainCont || !this.DocumentView || !this._annotationLayer.current ? null : (
                        <MarqueeAnnotator
                            Document={this.Document}
                            ref={this.marqueeref}
                            scrollTop={0}
                            annotationLayerScrollTop={0}
                            scaling={returnOne}
                            annotationLayerScaling={this._props.NativeDimScaling}
                            screenTransform={this.DocumentView().screenToViewTransform}
                            docView={this.DocumentView}
                            addDocument={this.addDocument}
                            finishMarquee={this.finishMarquee}
                            savedAnnotations={this.savedAnnotations}
                            selectionText={returnEmptyString}
                            annotationLayer={this._annotationLayer.current}
                            marqueeContainer={this._mainCont}
                            highlightDragSrcColor=""
                            anchorMenuCrop={this.crop}
                            // anchorMenuFlashcard={() => this.getImageDesc()}
                        />
                    )}
                    {this._outpaintingInProgress && (
                        <div className="imageBox-outpaintingSpinner">
                            <ReactLoading type="spin" color="#666" height={60} width={60} />
                        </div>
                    )}
                </div>
            </>
        );
    }

    public chooseImage = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.multiple = true;
        input.accept = 'image/*';
        input.onchange = async () => {
            const file = input.files?.[0];
            if (file) {
                const disposer = OverlayView.ShowSpinner();
                const [{ result }] = await Networking.UploadFilesToServer({ file });
                if (result instanceof Error) {
                    alert('Error uploading files - possibly due to unsupported file types');
                } else {
                    runInAction(() => {
                        this.dataDoc.layout_resetNativeDim = true;
                        !(result instanceof Error) && DocUtils.assignUploadInfo(result, this.dataDoc, this.fieldKey);
                        this.dataDoc[this.fieldKey] = new ImageField(result.accessPaths.agnostic.client);
                    });
                }
                disposer();
            } else {
                console.log('No file selected');
            }
        };
        input.click();
    };
}

Docs.Prototypes.TemplateMap.set(DocumentType.IMG, {
    layout: { view: ImageBox, dataField: 'data' },
    options: { acl: '', freeform: '', _layout_nativeDimEditable: true, systemIcon: 'BsFileEarmarkImageFill' },
});