import { computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnAll, returnFalse, returnOne, returnZero } from '../../../ClientUtils';
import { Doc, StrListCast } from '../../../fields/Doc';
import { emptyFunction } from '../../../Utils';
import { CollectionViewType } from '../../documents/DocumentTypes';
import { MarqueeView } from '../collections/collectionFreeForm';
import { CollectionGridView } from '../collections/collectionGrid';
import { CollectionStackingView } from '../collections/CollectionStackingView';
import { DocumentView } from '../nodes/DocumentView';
import { FieldViewProps } from '../nodes/FieldView';
import { ObservableReactComponent } from '../ObservableReactComponent';
import './DrawingPalette.scss';

@observer
export class DrawingPalette extends ObservableReactComponent<{}> {
    @observable private _savedDrawings: Doc[] = [];
    @observable _marqueeViewRef = React.createRef<MarqueeView>();
    private _stackRef = React.createRef<CollectionStackingView>();

    constructor(props: any) {
        super(props);
        makeObservable(this);
    }

    panelWidth = () => 100;
    panelHeight = () => 100;

    getCollection = () => {
        return this._marqueeViewRef.current?.collection(undefined, false, this._savedDrawings) || new Doc();
    };

    @computed get savedDrawingAnnos() {
        // const savedAnnos = Doc.MyDrawingAnnos;
        return (
            <div className="collectionMenu-contMenuButtons" style={{ height: '100%' }}>
                {/* <DocumentView PanelHeight={this.panelWidth} PanelWidth={this.panelHeight} Document={savedAnnos} renderDepth={2} isContentActive={returnFalse} childFilters={this.childFilters} /> */}
                {/* <CollectionStackingView
                    {...this._props}
                    Document={savedAnnos}
                    // setContentViewBox={emptyFunction}
                    // NativeWidth={returnZero}
                    // NativeHeight={returnZero}
                    ref={this._stackRef}
                    PanelHeight={this.panelWidth}
                    PanelWidth={this.panelHeight}
                    // childFilters={this.childFilters}
                    // sortFunc={this.sortByLinkAnchorY}
                    // setHeight={this.setHeightCallback}
                    // isAnnotationOverlay={false}
                    // select={emptyFunction}
                    NativeDimScaling={returnOne}
                    // childlayout_showTitle={this.layout_showTitle}
                    isContentActive={returnFalse}
                    isSelected={returnFalse}
                    isAnyChildContentActive={returnFalse}
                    // childDocumentsActive={this._props.isContentActive}
                    whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                    childHideDecorationTitle
                    // ScreenToLocalTransform={this.screenToLocalTransform}
                    renderDepth={this._props.renderDepth + 1}
                    type_collection={CollectionViewType.Stacking}
                    // fieldKey={'drawing-palette'}
                    pointerEvents={returnAll}
                /> */}
            </div>
        );
    }

    render() {
        return (
            <div className="drawing-palette">
                {/* {this._savedDrawings.map(doc => {
                    return <DocumentView 
                    Document={doc} 
                    renderDepth={0} 
                    PanelWidth={this.panelWidth} 
                    PanelHeight={this.panelHeight} 
                    isContentActive={this.isContentActive} />;
                })} */}
                {/* <CollectionGridView {...this._props} /> */}
                {}
                {/* <DocumentView Document={this.getCollection()} /> */}
                {this.savedDrawingAnnos}
            </div>
        );
    }
}