import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
import { Copy, Id } from '../../../../fields/FieldSymbols';
import { InkField } from '../../../../fields/InkField';
import { List } from '../../../../fields/List';
import { RichTextField } from '../../../../fields/RichTextField';
import { Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
import { Docs, DocUtils } from '../../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
import { SettingsManager } from '../../../util/SettingsManager';
import { Transform } from '../../../util/Transform';
import { undoBatch } from '../../../util/UndoManager';
import { MarqueeView } from '../../collections/collectionFreeForm';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { EditableView } from '../../EditableView';
import { Colors } from '../../global/globalEnums';
import { DocumentView, DocumentViewProps } from '../../nodes/DocumentView';
import { FieldView, FieldViewProps } from '../../nodes/FieldView';
import { StyleProp } from '../../StyleProvider';
import { PresBox } from './PresBox';
import './PresElementBox.scss';
import { PresMovement } from './PresEnums';
import React = require('react');
/**
 * This class models the view a document added to presentation will have in the presentation.
 * It involves some functionality for its buttons and options.
 */
@observer
export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(PresElementBox, fieldKey);
    }
    _heightDisposer: IReactionDisposer | undefined;

    @observable _dragging = false;
    // Idea: this boolean will determine whether to automatically show the video when this preselement is selected.
    // @observable static showVideo: boolean = false;
    @computed get indexInPres() {
        return DocListCast(this.presBox[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc);
    } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements)
    @computed get expandViewHeight() {
        return 100;
    }
    @computed get collapsedHeight() {
        return 35;
    } // the collapsed height changes depending on the state of the presBox.  We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up
    @computed get selectedArray() {
        return this.presBoxView?.selectedArray;
    }
    @computed get presBoxView() {
        const vpath = this.props.docViewPath();
        return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as PresBox) : undefined;
    }
    @computed get presBox() {
        return this.props.ContainingCollectionDoc!;
    }
    @computed get targetDoc() {
        return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc;
    }

    componentDidMount() {
        this.layoutDoc.hideLinkButton = true;
        this._heightDisposer = reaction(
            () => ({ expand: this.rootDoc.presExpandInlineButton, height: this.collapsedHeight }),
            ({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)),
            { fireImmediately: true }
        );
    }
    componentWillUnmount() {
        this._heightDisposer?.();
    }

    /**
     * Returns a local transformed coordinate array for given coordinates.
     */
    ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];

    @action
    presExpandDocumentClick = () => (this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton);

    embedHeight = (): number => this.collapsedHeight + this.expandViewHeight;
    // embedWidth = () => this.props.PanelWidth();
    // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
    embedWidth = (): number => this.props.PanelWidth() / 2;
    styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
        if (property === StyleProp.Opacity) return 1;
        return this.props.styleProvider?.(doc, props, property);
    };
    /**
     * The function that is responsible for rendering a preview or not for this
     * presentation element.
     */
    @computed get renderEmbeddedInline() {
        return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? null : (
            <div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}>
                <DocumentView
                    Document={this.rootDoc}
                    DataDoc={undefined} //this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
                    PanelWidth={this.embedWidth}
                    PanelHeight={this.embedHeight}
                    isContentActive={this.props.isContentActive}
                    styleProvider={this.styleProvider}
                    hideLinkButton={true}
                    ScreenToLocalTransform={Transform.Identity}
                    renderDepth={this.props.renderDepth + 1}
                    docViewPath={returnEmptyDoclist}
                    docFilters={this.props.docFilters}
                    docRangeFilters={this.props.docRangeFilters}
                    searchFilterDocs={this.props.searchFilterDocs}
                    ContainingCollectionView={undefined}
                    ContainingCollectionDoc={undefined}
                    rootSelected={returnTrue}
                    addDocument={returnFalse}
                    removeDocument={returnFalse}
                    fitContentsToBox={returnTrue}
                    moveDocument={this.props.moveDocument!}
                    focus={DocUtils.DefaultFocus}
                    whenChildContentsActiveChanged={returnFalse}
                    addDocTab={returnFalse}
                    pinToPres={returnFalse}
                    bringToFront={returnFalse}
                />
                {/* <div className="presItem-embeddedMask" /> */}
            </div>
        );
    }

    @computed get renderGroupSlides() {
        const childDocs = DocListCast(this.targetDoc.data);
        const groupSlides = childDocs.map((doc: Doc, ind: number) => (
            <div
                className="presItem-groupSlide"
                onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    this.presBoxView?.modifierSelect(doc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
                    this.presExpandDocumentClick();
                }}>
                <div className="presItem-groupNum">{`${ind + 1}.`}</div>
                <div className="presItem-name">
                    <EditableView
                        ref={this._titleRef}
                        editing={undefined}
                        contents={doc.title}
                        overflow={'ellipsis'}
                        GetValue={() => StrCast(doc.title)}
                        SetValue={(value: string) => {
                            doc.title = !value.trim().length ? '-untitled-' : value;
                            return true;
                        }}
                    />
                </div>
            </div>
        ));
        return groupSlides;
    }

    @computed get transition() {
        let transitionInS: number;
        if (this.rootDoc.presTransition) transitionInS = NumCast(this.rootDoc.presTransition) / 1000;
        else transitionInS = 0.5;
        return this.rootDoc.presMovement === PresMovement.Jump || this.rootDoc.presMovement === PresMovement.None ? null : 'M: ' + transitionInS + 's';
    }

    private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
    private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
    private _titleRef: React.RefObject<EditableView> = React.createRef();

    @action
    headerDown = (e: React.PointerEvent<HTMLDivElement>) => {
        const element = e.target as any;
        e.stopPropagation();
        e.preventDefault();
        if (element && !(e.ctrlKey || e.metaKey)) {
            if (this.selectedArray?.has(this.rootDoc)) {
                this.selectedArray.size === 1 && this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
                setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
            } else {
                setupMoveUpEvents(
                    this,
                    e,
                    (e: PointerEvent) => {
                        this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
                        return this.startDrag(e);
                    },
                    emptyFunction,
                    emptyFunction
                );
            }
        }
    };

    /**
     * Function to drag and drop the pres element to a diferent location
     */
    startDrag = (e: PointerEvent) => {
        const miniView: boolean = this.toolbarWidth <= 100;
        const activeItem = this.rootDoc;
        const dragArray = this.presBoxView?._dragArray ?? [];
        const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []);
        if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc);
        dragData.dropAction = 'move';
        dragData.treeViewDoc = this.presBox._viewType === CollectionViewType.Tree ? this.props.ContainingCollectionDoc : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
        dragData.moveDocument = this.props.moveDocument;
        const dragItem: HTMLElement[] = [];
        if (dragArray.length === 1) {
            const doc = this._itemRef.current || dragArray[0];
            if (doc) {
                doc.className = miniView ? 'presItem-miniSlide' : 'presItem-slide';
                dragItem.push(doc);
            }
        } else if (dragArray.length >= 1) {
            const doc = document.createElement('div');
            doc.className = 'presItem-multiDrag';
            doc.innerText = 'Move ' + this.selectedArray?.size + ' slides';
            doc.style.position = 'absolute';
            doc.style.top = e.clientY + 'px';
            doc.style.left = e.clientX - 50 + 'px';
            dragItem.push(doc);
        }

        // const dropEvent = () => runInAction(() => this._dragging = false);
        if (activeItem) {
            DragManager.StartDocumentDrag(
                dragItem.map(ele => ele),
                dragData,
                e.clientX,
                e.clientY,
                undefined
            );
            // runInAction(() => this._dragging = true);
            return true;
        }
        return false;
    };

    onPointerOver = (e: any) => {
        document.removeEventListener('pointermove', this.onPointerMove);
        document.addEventListener('pointermove', this.onPointerMove);
    };

    onPointerMove = (e: PointerEvent) => {
        const slide = this._itemRef.current!;
        const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentationTargetDoc);
        if (slide && dragIsPresItem) {
            const rect = slide.getBoundingClientRect();
            const y = e.clientY - rect.top; //y position within the element.
            const height = slide.clientHeight;
            const halfLine = height / 2;
            if (y <= halfLine) {
                slide.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`;
                slide.style.borderBottom = '0px';
            } else if (y > halfLine) {
                slide.style.borderTop = '0px';
                slide.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`;
            }
        }
        document.removeEventListener('pointermove', this.onPointerMove);
    };

    onPointerLeave = (e: any) => {
        this._itemRef.current!.style.borderTop = '0px';
        this._itemRef.current!.style.borderBottom = '0px';
        document.removeEventListener('pointermove', this.onPointerMove);
    };

    @action
    toggleProperties = () => {
        if (SettingsManager.propertiesWidth < 5) {
            action(() => (SettingsManager.propertiesWidth = 250));
        }
    };

    @undoBatch
    removeItem = action((e: React.MouseEvent) => {
        e.stopPropagation();
        if (this.indexInPres < (this.presBoxView?.itemIndex || 0)) {
            this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1;
        }
        this.props.removeDocument?.(this.rootDoc);
        this.presBoxView?.removeFromSelectedArray(this.rootDoc);
        this.removeAllRecordingInOverlay();
    });

    // set the value/title of the individual pres element
    @undoBatch
    @action
    onSetValue = (value: string) => {
        this.rootDoc.title = !value.trim().length ? '-untitled-' : value;
        return true;
    };

    /**
     * Method called for updating the view of the currently selected document
     *
     * @param targetDoc
     * @param activeItem
     */
    @undoBatch
    @action
    updateCapturedContainerLayout = (targetDoc: Doc, activeItem: Doc) => {
        activeItem.presX = NumCast(targetDoc.x);
        activeItem.presY = NumCast(targetDoc.y);
        activeItem.presRot = NumCast(targetDoc.rotation);
        activeItem.presWidth = NumCast(targetDoc.width);
        activeItem.presHeight = NumCast(targetDoc.height);
    };
    /**
     * Method called for updating the view of the currently selected document
     *
     * @param targetDoc
     * @param activeItem
     */
    @undoBatch
    @action
    updateCapturedViewContents = (targetDoc: Doc, activeItem: Doc) => {
        switch (targetDoc.type) {
            case DocumentType.PDF:
            case DocumentType.WEB:
            case DocumentType.RTF:
                const scroll = targetDoc._scrollTop;
                activeItem.presPinViewScroll = scroll;
                if (targetDoc.type === DocumentType.RTF) {
                    activeItem.presData = targetDoc[Doc.LayoutFieldKey(targetDoc)] instanceof RichTextField ? (targetDoc[Doc.LayoutFieldKey(targetDoc)] as RichTextField)[Copy]() : targetDoc.text;
                }
                break;
            case DocumentType.INK:
                activeItem.presData = targetDoc[Doc.LayoutFieldKey(targetDoc)] instanceof InkField ? (targetDoc[Doc.LayoutFieldKey(targetDoc)] as InkField)[Copy]() : targetDoc.data;
                break;
            case DocumentType.VID:
            case DocumentType.AUDIO:
                activeItem.presStartTime = targetDoc._currentTimecode;
                break;
            case DocumentType.COMPARISON:
                const clipWidth = targetDoc._clipWidth;
                activeItem.presPinClipWidth = clipWidth;
                break;
            case DocumentType.COL:
                activeItem.presPinLayoutData = new List<string>(DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]).map(d => JSON.stringify({ id: d[Id], x: NumCast(d.x), y: NumCast(d.y), w: NumCast(d._width), h: NumCast(d._height) })));
            default:
                const bestView = DocumentManager.Instance.getFirstDocumentView(targetDoc);
                if (activeItem.presPinViewBounds && bestView) {
                    const bounds = MarqueeView.CurViewBounds(targetDoc, bestView.props.PanelWidth(), bestView.props.PanelHeight());
                    activeItem.presPinView = true;
                    activeItem.presPinViewScale = NumCast(targetDoc._viewScale, 1);
                    activeItem.presPinViewX = bounds.left + bounds.width / 2;
                    activeItem.presPinViewY = bounds.top + bounds.height / 2;
                    activeItem.presPinViewBounds = new List<number>([bounds.left, bounds.top, bounds.left + bounds.width, bounds.top + bounds.height]);
                } else {
                    activeItem.presPinViewX = targetDoc._panX;
                    activeItem.presPinViewY = targetDoc._panY;
                    activeItem.presPinViewScale = targetDoc._viewScale;
                }
        }
    };

    @computed get recordingIsInOverlay() {
        return DocListCast(Doc.MyOverlayDocs.data).some(doc => doc.slides === this.rootDoc);
    }

    // a previously recorded video will have timecode defined
    static videoIsRecorded = (activeItem: Opt<Doc>) => {
        const casted = Cast(activeItem?.recording, Doc, null);
        return casted && 'currentTimecode' in casted;
    };

    removeAllRecordingInOverlay = () => {
        DocListCast(Doc.MyOverlayDocs.data).forEach(doc => {
            if (doc.slides === this.rootDoc) {
                Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc);
            }
        });
    };

    static removeEveryExistingRecordingInOverlay = () => {
        // Remove every recording that already exists in overlay view
        DocListCast(Doc.MyOverlayDocs.data).forEach(doc => {
            if (doc.slides !== null) {
                // if it's a recording video, don't remove from overlay (user can lose data)
                if (!PresElementBox.videoIsRecorded(DocCast(doc.slides))) return;

                Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc);
            }
        });
    };

    @undoBatch
    @action
    hideRecording = (e: React.MouseEvent, iconClick: boolean = false) => {
        e.stopPropagation();
        this.removeAllRecordingInOverlay();
        // if (iconClick) PresElementBox.showVideo = false;
    };

    @undoBatch
    @action
    showRecording = (activeItem: Doc, iconClick: boolean = false) => {
        // if (iconClick) PresElementBox.showVideo = true;
        // if (!PresElementBox.showVideo) return;

        // remove the overlays on switch *IF* not opened from the specific icon
        if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay();

        if (activeItem.recording) {
            Doc.AddDocToList(Doc.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
        }
    };

    @undoBatch
    @action
    startRecording = (e: React.MouseEvent, activeItem: Doc) => {
        e.stopPropagation();
        if (PresElementBox.videoIsRecorded(activeItem)) {
            // if we already have an existing recording
            this.showRecording(activeItem, true);
            //   // if we already have an existing recording
            //   Doc.AddDocToList(Doc.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
        } else {
            // Remove every recording that already exists in overlay view
            // this is a design decision to clear to focus in on the recoding mode
            PresElementBox.removeEveryExistingRecordingInOverlay();

            // if we dont have any recording
            const recording = Docs.Create.WebCamDocument('', {
                _width: 384,
                _height: 216,
                hideDocumentButtonBar: true,
                hideDecorationTitle: true,
                hideOpenButton: true,
                // hideDeleteButton: true,
                cloneFieldFilter: new List<string>(['system']),
            });

            // attach the recording to the slide, and attach the slide to the recording
            recording.slides = activeItem;
            activeItem.recording = recording;

            // make recording box appear in the bottom right corner of the screen
            recording.overlayX = window.innerWidth - recording[WidthSym]() - 20;
            recording.overlayY = window.innerHeight - recording[HeightSym]() - 20;
            Doc.AddDocToList(Doc.MyOverlayDocs, undefined, recording);
        }
    };

    @computed
    get toolbarWidth(): number {
        const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
        let width: number = NumCast(this.presBox._width);
        if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
        if (width === 0) width = 300;
        return width;
    }

    @computed get presButtons() {
        const presBox: Doc = this.presBox; //presBox
        const presBoxColor: string = StrCast(presBox._backgroundColor);
        const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false;
        const targetDoc: Doc = this.targetDoc;
        const activeItem: Doc = this.rootDoc;

        const items: JSX.Element[] = [];
        if (activeItem.presPinLayout) {
            items.push(
                <Tooltip key="slide" title={<div className="dash-tooltip">Update captured doc layout</div>}>
                    <div className="slideButton" onClick={() => this.updateCapturedContainerLayout(targetDoc, activeItem)} style={{ fontWeight: 700, display: 'flex' }}>
                        L
                    </div>
                </Tooltip>
            );
        }
        if (activeItem.presPinData || activeItem.presPinView) {
            items.push(
                <Tooltip key="flex" title={<div className="dash-tooltip">Update captured doc content</div>}>
                    <div className="slideButton" onClick={() => this.updateCapturedViewContents(targetDoc, activeItem)} style={{ fontWeight: 700, display: 'flex' }}>
                        C
                    </div>
                </Tooltip>
            );
        }
        if (!Doc.noviceMode) {
            items.push(
                <Tooltip key="slash" title={<div className="dash-tooltip">{this.recordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}>
                    <div className="slideButton" onClick={e => (this.recordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}>
                        <FontAwesomeIcon icon={`video${this.recordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} />
                    </div>
                </Tooltip>
            );
        }
        if (this.indexInPres !== 0) {
            items.push(
                <Tooltip key="arrow" title={<div className="dash-tooltip">{activeItem.groupWithUp ? 'Ungroup' : 'Group with up'}</div>}>
                    <div
                        className="slideButton"
                        onClick={() => (activeItem.groupWithUp = (NumCast(activeItem.groupWithUp) + 1) % 3)}
                        style={{
                            zIndex: 1000 - this.indexInPres,
                            fontWeight: 700,
                            backgroundColor: activeItem.groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
                            outline: NumCast(activeItem.groupWithUp) > 1 ? 'solid black 1px' : undefined,
                            height: activeItem.groupWithUp ? 53 : 18,
                            transform: activeItem.groupWithUp ? 'translate(0, -17px)' : undefined,
                        }}>
                        <div style={{ transform: activeItem.groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
                            <FontAwesomeIcon icon={'arrow-up'} onPointerDown={e => e.stopPropagation()} />
                        </div>
                    </div>
                </Tooltip>
            );
        }
        items.push(
            <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? 'Minimize' : 'Expand'}</div>}>
                <div
                    className="slideButton"
                    onClick={e => {
                        e.stopPropagation();
                        this.presExpandDocumentClick();
                    }}>
                    <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
                </div>
            </Tooltip>
        );
        items.push(
            <Tooltip key="trash" title={<div className="dash-tooltip">Remove from presentation</div>}>
                <div className={'slideButton'} onClick={this.removeItem}>
                    <FontAwesomeIcon icon={'trash'} onPointerDown={e => e.stopPropagation()} />
                </div>
            </Tooltip>
        );
        return items;
    }

    @computed get mainItem() {
        const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
        const isCurrent: boolean = this.presBox._itemIndex === this.indexInPres;
        const miniView: boolean = this.toolbarWidth <= 110;
        const presBox: Doc = this.presBox; //presBox
        const presBoxColor: string = StrCast(presBox._backgroundColor);
        const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false;
        const activeItem: Doc = this.rootDoc;

        return (
            <div
                className={`presItem-container`}
                key={this.props.Document[Id] + this.indexInPres}
                ref={this._itemRef}
                style={{
                    backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent',
                    opacity: this._dragging ? 0.3 : 1,
                    paddingLeft: NumCast(this.layoutDoc._xPadding, this.props.xPadding),
                    paddingRight: NumCast(this.layoutDoc._xPadding, this.props.xPadding),
                    paddingTop: NumCast(this.layoutDoc._yPadding, this.props.yPadding),
                    paddingBottom: NumCast(this.layoutDoc._yPadding, this.props.yPadding),
                }}
                onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
                    this.showRecording(activeItem);
                }}
                onDoubleClick={action(e => {
                    this.toggleProperties();
                    this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
                })}
                onPointerOver={this.onPointerOver}
                onPointerLeave={this.onPointerLeave}
                onPointerDown={this.headerDown}>
                {miniView ? (
                    <div className={`presItem-miniSlide ${isSelected ? 'active' : ''}`} ref={this._dragRef}>
                        {`${this.indexInPres + 1}.`}
                    </div>
                ) : (
                    <div
                        ref={this._dragRef}
                        className={`presItem-slide ${isCurrent ? 'active' : ''}`}
                        style={{
                            display: 'infline-block',
                            backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
                            //boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
                            border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined,
                        }}>
                        <div
                            className="presItem-name"
                            style={{
                                display: 'inline-flex',
                                pointerEvents: isSelected ? undefined : 'none',
                                width: `calc(100% ${this.rootDoc.presExpandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`,
                                cursor: isSelected ? 'text' : 'grab',
                            }}>
                            <div
                                className="presItem-number"
                                title="select without navigation"
                                style={{ pointerEvents: this.presBoxView?.isContentActive() ? 'all' : undefined }}
                                onPointerDown={e => {
                                    e.stopPropagation();
                                    if (this._itemRef.current && this._dragRef.current) {
                                        this.presBoxView?.modifierSelect(activeItem, this._itemRef.current, this._dragRef.current, false, false, false, true);
                                    }
                                }}
                                onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}.  `}</div>
                            <EditableView ref={this._titleRef} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} />
                        </div>
                        {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
                        {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}
                        <div className="presItem-slideButtons" style={{ position: 'absolute', right: 0 }}>
                            {...this.presButtons}
                        </div>
                        {this.renderEmbeddedInline}
                    </div>
                )}
            </div>
        );
    }

    render() {
        return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem;
    }
}