import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@mui/material';
import { action, computed, IReactionDisposer, makeObservable, observable, override, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { List } from '../../../../fields/List';
import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
import { copyProps, emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { CollectionViewType } from '../../../documents/DocumentTypes';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
import { SettingsManager } from '../../../util/SettingsManager';
import { Transform } from '../../../util/Transform';
import { undoable, undoBatch } from '../../../util/UndoManager';
import { TreeView } from '../../collections/TreeView';
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 * as React from '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);
    }
    private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
    private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
    private _titleRef: React.RefObject<EditableView> = React.createRef();
    private _heightDisposer: IReactionDisposer | undefined;
    readonly expandViewHeight = 100;
    readonly collapsedHeight = 35;

    @observable _dragging = false;

    _prevProps: FieldViewProps;
    @override _props: FieldViewProps;
    constructor(props: FieldViewProps) {
        super(props);
        this._props = this._prevProps = props;
        makeObservable(this);
    }

    componentDidUpdate() {
        copyProps(this);
    }

    // the presentation view that renders this slide
    @computed get presBoxView() {
        return this._props.DocumentView?.()?._props.docViewPath().lastElement()?.ComponentView as PresBox;
    }

    // the presentation view document that renders this slide
    @computed get presBox() {
        return this.presBoxView?.Document;
    }

    // Since this node is being rendered with a template, this method retrieves
    // the actual slide being rendered from the auto-generated rendering template
    @computed get slideDoc() {
        return this._props.TemplateDataDocument ?? this.Document;
    }

    // this is the document in the workspaces that is targeted by the slide
    @computed get targetDoc() {
        return Cast(this.slideDoc.presentation_targetDoc, Doc, null) || this.slideDoc;
    }

    // computes index of this presentation slide in the presBox list
    @computed get indexInPres() {
        return this.presBoxView?.SlideIndex(this.slideDoc);
    }

    @computed get selectedArray() {
        return this.presBoxView?.selectedArray;
    }

    @computed get videoRecordingIsInOverlay() {
        return Doc.MyOverlayDocs.some(doc => doc.slides === this.slideDoc);
    }

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

    presExpandDocumentClick = () => (this.slideDoc.presentation_expandInlineButton = !this.slideDoc.presentation_expandInlineButton);
    embedHeight = () => this.collapsedHeight + this.expandViewHeight;
    embedWidth = () => this._props.PanelWidth() / 2;
    styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
        return property === StyleProp.Opacity ? 1 : 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.slideDoc.presentation_expandInlineButton || !this.targetDoc ? null : (
            <div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}>
                <DocumentView
                    Document={PresBox.targetRenderedDoc(this.slideDoc)}
                    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}
                    childFilters={this._props.childFilters}
                    childFiltersByRanges={this._props.childFiltersByRanges}
                    searchFilterDocs={this._props.searchFilterDocs}
                    addDocument={returnFalse}
                    removeDocument={returnFalse}
                    fitContentsToBox={returnTrue}
                    moveDocument={this._props.moveDocument!}
                    focus={emptyFunction}
                    whenChildContentsActiveChanged={returnFalse}
                    addDocTab={returnFalse}
                    pinToPres={returnFalse}
                    bringToFront={returnFalse}
                />
            </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.slideDoc.presentation_transition) transitionInS = NumCast(this.slideDoc.presentation_transition) / 1000;
        else transitionInS = 0.5;
        return this.slideDoc.presentation_movement === PresMovement.Jump || this.slideDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's';
    }

    @action
    headerDown = (e: React.PointerEvent<HTMLDivElement>) => {
        const element = e.target as any;
        e.stopPropagation();
        e.preventDefault();
        if (element && !(e.ctrlKey || e.metaKey || e.button === 2)) {
            this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false);
            setupMoveUpEvents(this, e, this.startDrag, emptyFunction, e => {
                e.stopPropagation();
                e.preventDefault();
                this.presBoxView?.modifierSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
                this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem);
            });
        }
    };

    /**
     * Function to drag and drop the pres element to a diferent location
     */
    startDrag = (e: PointerEvent) => {
        const miniView: boolean = this.toolbarWidth <= 100;
        const activeItem = this.slideDoc;
        const dragArray = this.presBoxView?._dragArray ?? [];
        const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []);
        if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.slideDoc);
        dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this._props.DocumentView?.()?._props.treeViewDoc;
        dragData.moveDocument = this._props.moveDocument;
        const dragItem: HTMLElement[] = [];
        const classesToRestore = new Map<HTMLElement, string>();
        if (dragArray.length === 1) {
            const doc = this._itemRef.current || dragArray[0];
            if (doc) {
                classesToRestore.set(doc, doc.className);
                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);
        }

        if (activeItem) {
            runInAction(() => (this._dragging = true));
            DragManager.StartDocumentDrag(
                dragItem.map(ele => ele),
                dragData,
                e.clientX,
                e.clientY,
                undefined,
                action(() => {
                    Array.from(classesToRestore).forEach(pair => (pair[0].className = pair[1]));
                    this._dragging = false;
                })
            );
            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.presentation_targetDoc);
        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) => {
        const slide = this._itemRef.current;
        if (slide) {
            slide.style.borderTop = '0px';
            slide.style.borderBottom = '0px';
        }
        document.removeEventListener('pointermove', this.onPointerMove);
    };

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

    removePresentationItem = undoable(
        action((e: React.MouseEvent) => {
            e.stopPropagation();
            if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) {
                this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1;
            }
            this._props.removeDocument?.(this.slideDoc);
            this.presBoxView?.removeFromSelectedArray(this.slideDoc);
            this.removeAllRecordingInOverlay();
        }),
        'Remove doc from pres trail'
    );

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

    /**
     * Method called for updating the view of the currently selected document
     *
     * @param targetDoc
     * @param activeItem
     */
    @undoBatch
    updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => {
        const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
        activeItem.config_x = NumCast(targetDoc.x);
        activeItem.config_y = NumCast(targetDoc.y);
        activeItem.config_rotation = NumCast(targetDoc.rotation);
        activeItem.config_width = NumCast(targetDoc.width);
        activeItem.config_height = NumCast(targetDoc.height);
        activeItem.config_pinLayout = !activeItem.config_pinLayout;
        // activeItem.config_pinLayout = true;
    };

    /**
     * Method called for updating the view of the currently selected document
     *
     * @param presTargetDoc
     * @param activeItem
     */
    updateCapturedViewContents = undoable(
        action((presTargetDoc: Doc, activeItem: Doc) => {
            const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
            PresBox.pinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target);
        }),
        'updated captured view contents'
    );

    // a previously recorded video will have timecode defined
    static videoIsRecorded = (activeItem: Opt<Doc>) => 'layout_currentTimecode' in (DocCast(activeItem?.recording) ?? {});

    removeAllRecordingInOverlay = () => Doc.MyOverlayDocs.filter(doc => doc.slides === this.slideDoc).forEach(Doc.RemFromMyOverlay);

    /// remove all videos that have been recorded from overlay (leave videso that are being recorded to avoid losing data)
    static removeEveryExistingRecordingInOverlay = () => {
        Doc.MyOverlayDocs.filter(doc => doc.slides !== null && PresElementBox.videoIsRecorded(DocCast(doc.slides))) //
            .forEach(Doc.RemFromMyOverlay);
    };

    hideRecording = undoable(
        action((e: React.MouseEvent, iconClick: boolean = false) => {
            e.stopPropagation();
            this.removeAllRecordingInOverlay();
        }),
        'hide video recording'
    );

    showRecording = undoable(
        action((activeItem: Doc, iconClick: boolean = false) => {
            // remove the overlays on switch *IF* not opened from the specific icon
            if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay();

            activeItem.recording && Doc.AddToMyOverlay(DocCast(activeItem.recording));
        }),
        'show video recording'
    );

    startRecording = undoable(
        action((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.AddToMyOverlay(Cast(activeItem.recording, Doc, null));
            } else {
                // we dont have any recording
                // 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();

                // create and add a recording to the slide
                // make recording box appear in the bottom right corner of the screen
                Doc.AddToMyOverlay(
                    (activeItem.recording = Docs.Create.WebCamDocument('', {
                        _width: 384,
                        _height: 216,
                        overlayX: window.innerWidth - 384 - 20,
                        overlayY: window.innerHeight - 216 - 20,
                        layout_hideDocumentButtonBar: true,
                        layout_hideDecorationTitle: true,
                        layout_hideOpenButton: true,
                        cloneFieldFilter: new List<string>(['isSystem']),
                        slides: activeItem, // attach the slide to the recording
                    }))
                );
            }
        }),
        'start video recording'
    );

    @undoBatch
    lfg = (e: React.MouseEvent) => {
        e.stopPropagation();
        // TODO: fix this bug
        const { toggleChildrenRun } = this.slideDoc;
        TreeView.ToggleChildrenRun.get(this.slideDoc)?.();

        // call this.slideDoc.recurChildren() to get all the children
        // if (iconClick) PresElementBox.showVideo = false;
    };

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

    @computed get presButtons() {
        const presBox = this.presBox;
        const presBoxColor = StrCast(presBox?._backgroundColor);
        const presColorBool = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false;
        const targetDoc = this.targetDoc;
        const activeItem = this.slideDoc;
        const hasChildren = BoolCast(this.slideDoc?.hasChildren);

        const items: JSX.Element[] = [];

        items.push(
            <Tooltip key="slide" title={<div className="dash-tooltip">Update captured doc layout</div>}>
                <div
                    className="slideButton"
                    onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedContainerLayout(targetDoc, activeItem), true)}
                    style={{ opacity: activeItem.config_pinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
                    L
                </div>
            </Tooltip>
        );
        items.push(
            <Tooltip key="flex" title={<div className="dash-tooltip">Update captured doc content</div>}>
                <div
                    className="slideButton"
                    onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedViewContents(targetDoc, activeItem))}
                    style={{ opacity: activeItem.config_pinData || activeItem.config_pinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
                    C
                </div>
            </Tooltip>
        );
        items.push(
            <Tooltip key="slash" title={<div className="dash-tooltip">{this.videoRecordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}>
                <div className="slideButton" onClick={e => (this.videoRecordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}>
                    <FontAwesomeIcon icon={`video${this.videoRecordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} />
                </div>
            </Tooltip>
        );
        if (this.indexInPres !== 0) {
            items.push(
                <Tooltip
                    key="arrow"
                    title={
                        <div className="dash-tooltip">
                            {!activeItem.presentation_groupWithUp
                                ? 'Not grouped with previous slide (click to group)'
                                : activeItem.presentation_groupWithUp === 1
                                  ? 'Run simultaneously with previous slide (click again to run after)'
                                  : 'Run after previous slide (click to ungroup from previous)'}
                        </div>
                    }>
                    <div
                        className="slideButton"
                        onClick={() => (activeItem.presentation_groupWithUp = (NumCast(activeItem.presentation_groupWithUp) + 1) % 3)}
                        style={{
                            zIndex: 1000 - this.indexInPres,
                            fontWeight: 700,
                            backgroundColor: activeItem.presentation_groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
                            outline: NumCast(activeItem.presentation_groupWithUp) > 1 ? 'solid black 1px' : undefined,
                            height: activeItem.presentation_groupWithUp ? 53 : 18,
                            transform: activeItem.presentation_groupWithUp ? 'translate(0, -17px)' : undefined,
                        }}>
                        <div style={{ transform: activeItem.presentation_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.slideDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}>
                <div
                    className="slideButton"
                    onClick={e => {
                        e.stopPropagation();
                        this.presExpandDocumentClick();
                    }}>
                    <FontAwesomeIcon icon={this.slideDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
                </div>
            </Tooltip>
        );
        if (!Doc.noviceMode && hasChildren) {
            // TODO: replace with if treeveiw, has childrenDocs
            items.push(
                <Tooltip key="children" title={<div className="dash-tooltip">Run child processes (tree only)</div>}>
                    <div
                        className="slideButton"
                        onClick={e => {
                            e.stopPropagation();
                            this.lfg(e);
                        }}
                        style={{ fontWeight: 700 }}>
                        <FontAwesomeIcon icon={'circle-play'} 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.removePresentationItem}>
                    <FontAwesomeIcon icon={'trash'} onPointerDown={e => e.stopPropagation()} />
                </div>
            </Tooltip>
        );
        return items;
    }

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

        return (
            <div
                className="presItem-container"
                key={this.slideDoc[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),
                }}
                onDoubleClick={action(e => {
                    this.toggleProperties();
                    this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, false);
                })}
                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' : ''}${this.slideDoc.runProcess ? ' testingv2' : ''}`}
                        style={{
                            display: 'infline-block',
                            backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                            //layout_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.slideDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`,
                                cursor: isSelected ? 'text' : 'grab',
                            }}>
                            <div
                                className="presItem-number"
                                title="select without navigation"
                                onPointerDown={e => {
                                    e.stopPropagation();
                                    if (this._itemRef.current && this._dragRef.current) {
                                        this.presBoxView?.modifierSelect(activeItem, this._itemRef.current, this._dragRef.current, true, false, false);
                                    }
                                }}
                                onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}.  `}</div>
                            <EditableView ref={this._titleRef} oneLine={true} 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.slideDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem;
    }
}
