import { observer } from "mobx-react";
import { ViewBoxBaseComponent } from "../../DocComponent";
import { FieldView, FieldViewProps } from "../FieldView";
import { computed } from "mobx";
import { Id } from "../../../../fields/FieldSymbols";
import React from "react";
import { EditableView } from "../../EditableView";
import { DocListCast } from "../../../../fields/Doc";
import { StrCast } from "../../../../fields/Types";


@observer
export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(ImportElementBox, fieldKey);
    }

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

    @computed importBoxVoew() {
        return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox;
    }
    
    @computed get indexInPres() {
        return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc);
    }
    
    @computed get presBox() {
        return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
    }

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

@computed get mainItem() {
    const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres;
    //const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
  //  const activeItem: Doc = this.rootDoc;

    return(
        <div
            className = {`presItem-container`}
            // key={this.props.Document[Id] + this.indexInPres}
            style = {{backgroundColor: 'pink'}}
            
        >
            <div
                ref = {this._dragRef}
                className = {`presItem-slide ${isCurrent ? 'active' : ''}`}
                style = {{
                    backgroundColor: 'green'
                }}>
                    <div
                        className="presItem-number"
                        title = "select without navigation"
                    
                    >
                         {/* <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> */}

                    </div>
            </div>

        </div>
    )
}

}