import { action, computed, makeObservable, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils';
import { Doc, Opt, StrListCast } from '../../../fields/Doc';
import { List } from '../../../fields/List';
import { ObjectField } from '../../../fields/ObjectField';
import { listSpec } from '../../../fields/Schema';
import { ComputedField, ScriptField } from '../../../fields/ScriptField';
import { Cast, NumCast, StrCast } from '../../../fields/Types';
import { Docs } from '../../documents/Documents';
import { DocumentManager } from '../../util/DocumentManager';
import { ScriptingGlobals } from '../../util/ScriptingGlobals';
import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
import { FieldsDropdown } from '../FieldsDropdown';
import { DocumentView } from '../nodes/DocumentView';
import { FocusViewOptions } from '../nodes/FieldView';
import { PresBox } from '../nodes/trails';
import { CollectionSubView } from './CollectionSubView';
import './CollectionTimeView.scss';
import { ViewDefBounds, computePivotLayout, computeTimelineLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines';
import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';

@observer
export class CollectionTimeView extends CollectionSubView() {
    _changing = false;
    @observable _layoutEngine = computePivotLayout.name;
    @observable _collapsed: boolean = false;
    @observable _childClickedScript: Opt<ScriptField> = undefined;
    @observable _viewDefDivClick: Opt<ScriptField> = undefined;
    @observable _focusPivotField: Opt<string> = undefined;

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

    componentDidMount() {
        this._props.setContentViewBox?.(this);
        runInAction(() => {
            this._childClickedScript = ScriptField.MakeScript('openInLightbox(this)', { this: Doc.name });
            this._viewDefDivClick = ScriptField.MakeScript('pivotColumnClick(this,payload)', { payload: 'any' });
        });
    }

    get pivotField() {
        return this._focusPivotField || StrCast(this.layoutDoc._pivotField);
    }

    getAnchor = (addAsAnnotation: boolean) => {
        const anchor = Docs.Create.ConfigDocument({
            title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as any,
            annotationOn: this.Document,
        });
        PresBox.pinDocView(anchor, { pinData: { type_collection: true, pivot: true, filters: true } }, this.Document);

        if (addAsAnnotation) {
            // when added as an annotation, links to anchors can be found as links to the document even if the anchors are not rendered
            if (Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) {
                Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor);
            } else {
                this.dataDoc[this._props.fieldKey + '_annotations'] = new List<Doc>([anchor]);
            }
        }
        return anchor;
    };

    @action
    scrollPreview = (docView: DocumentView, anchor: Doc, focusSpeed: number, options: FocusViewOptions) => {
        // if in preview, then override document's fields with view spec
        this._focusFilters = StrListCast(anchor.config_docFilters);
        this._focusRangeFilters = StrListCast(anchor.config_docRangeFilters);
        this._focusPivotField = StrCast(anchor.config_pivotField);
        return undefined;
    };

    layoutEngine = () => this._layoutEngine;
    toggleVisibility = action(() => (this._collapsed = !this._collapsed));

    onMinDown = (e: React.PointerEvent) => {
        setupMoveUpEvents(
            this,
            e,
            action((e: PointerEvent, down: number[], delta: number[]) => {
                const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0));
                const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10));
                this.Document[this._props.fieldKey + '-timelineMinReq'] = minReq + ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
                this.Document[this._props.fieldKey + '-timelineSpan'] = undefined;
                return false;
            }),
            returnFalse,
            emptyFunction
        );
    };

    onMaxDown = (e: React.PointerEvent) => {
        setupMoveUpEvents(
            this,
            e,
            action((e: PointerEvent, down: number[], delta: number[]) => {
                const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0));
                const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10));
                this.Document[this._props.fieldKey + '-timelineMaxReq'] = maxReq + ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
                return false;
            }),
            returnFalse,
            emptyFunction
        );
    };

    onMidDown = (e: React.PointerEvent) => {
        setupMoveUpEvents(
            this,
            e,
            action((e: PointerEvent, down: number[], delta: number[]) => {
                const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0));
                const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10));
                this.Document[this._props.fieldKey + '-timelineMinReq'] = minReq - ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
                this.Document[this._props.fieldKey + '-timelineMaxReq'] = maxReq - ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
                return false;
            }),
            returnFalse,
            emptyFunction
        );
    };

    goTo = (prevFilterIndex: number) => {
        this.layoutDoc._pivotField = this.layoutDoc['_prevPivotFields' + prevFilterIndex];
        this.layoutDoc._childFilters = ObjectField.MakeCopy(this.layoutDoc['_prevDocFilter' + prevFilterIndex] as ObjectField);
        this.layoutDoc._childFiltersByRanges = ObjectField.MakeCopy(this.layoutDoc['_prevDocRangeFilters' + prevFilterIndex] as ObjectField);
        this.layoutDoc._prevFilterIndex = prevFilterIndex;
    };

    @action
    contentsDown = (e: React.MouseEvent) => {
        const prevFilterIndex = NumCast(this.layoutDoc._prevFilterIndex);
        if (prevFilterIndex > 0) {
            this.goTo(prevFilterIndex - 1);
        } else {
            this.layoutDoc._childFilters = new List([]);
        }
    };

    @computed get contents() {
        return (
            <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none' }} onClick={this.contentsDown}>
                <CollectionFreeFormView
                    {...this._props}
                    engineProps={{ pivotField: this.pivotField, childFilters: this.childDocFilters, childFiltersByRanges: this.childDocRangeFilters }}
                    fitContentsToBox={returnTrue}
                    childClickScript={this._childClickedScript}
                    viewDefDivClick={this.layoutEngine() === computeTimelineLayout.name ? undefined : this._viewDefDivClick}
                    layoutEngine={this.layoutEngine}
                />
            </div>
        );
    }

    public static SyncTimelineToPresentation(doc: Doc) {
        const fieldKey = Doc.LayoutFieldKey(doc);
        doc[fieldKey + '-timelineCur'] = ComputedField.MakeFunction("(activePresentationItem()[this._pivotField || 'year'] || 0)");
    }
    specificMenu = (e: React.MouseEvent) => {
        const layoutItems: ContextMenuProps[] = [];
        const doc = this.layoutDoc;

        layoutItems.push({
            description: 'Force Timeline',
            event: () => {
                doc._forceRenderEngine = computeTimelineLayout.name;
            },
            icon: 'compress-arrows-alt',
        });
        layoutItems.push({
            description: 'Force Pivot',
            event: () => {
                doc._forceRenderEngine = computePivotLayout.name;
            },
            icon: 'compress-arrows-alt',
        });
        layoutItems.push({
            description: 'Auto Time/Pivot layout',
            event: () => {
                doc._forceRenderEngine = undefined;
            },
            icon: 'compress-arrows-alt',
        });
        layoutItems.push({ description: 'Sync with presentation', event: () => CollectionTimeView.SyncTimelineToPresentation(doc), icon: 'compress-arrows-alt' });

        ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' });
    };

    render() {
        let nonNumbers = 0;
        this.childDocs.map(doc => {
            const num = NumCast(doc[this.pivotField], Number(StrCast(doc[this.pivotField])));
            if (Number.isNaN(num)) {
                nonNumbers++;
            }
        });
        const forceLayout = StrCast(this.layoutDoc._forceRenderEngine);
        const doTimeline = forceLayout ? forceLayout === computeTimelineLayout.name : nonNumbers / this.childDocs.length < 0.1 && this._props.PanelWidth() / this._props.PanelHeight() > 6;
        if (doTimeline !== (this._layoutEngine === computeTimelineLayout.name)) {
            if (!this._changing) {
                this._changing = true;
                setTimeout(
                    action(() => {
                        this._layoutEngine = doTimeline ? computeTimelineLayout.name : computePivotLayout.name;
                        this._changing = false;
                    }),
                    0
                );
            }
        }

        return (
            <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this._props.PanelWidth(), height: '100%' }}>
                {this.contents}
                {!this._props.isSelected() || !doTimeline ? null : (
                    <>
                        <div className="collectionTimeView-thumb-min collectionTimeView-thumb" key="min" onPointerDown={this.onMinDown} />
                        <div className="collectionTimeView-thumb-max collectionTimeView-thumb" key="mid" onPointerDown={this.onMaxDown} />
                        <div className="collectionTimeView-thumb-mid collectionTimeView-thumb" key="max" onPointerDown={this.onMidDown} />
                    </>
                )}
                <div style={{ right: 0, top: 0, position: 'absolute' }}>
                    <FieldsDropdown Document={this.Document} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} />
                </div>
            </div>
        );
    }
}

ScriptingGlobals.add(function pivotColumnClick(pivotDoc: Doc, bounds: ViewDefBounds) {
    const pivotField = StrCast(pivotDoc._pivotField, 'author');
    let prevFilterIndex = NumCast(pivotDoc._prevFilterIndex);
    const originalFilter = StrListCast(ObjectField.MakeCopy(pivotDoc._childFilters as ObjectField));
    pivotDoc['_prevDocFilter' + prevFilterIndex] = ObjectField.MakeCopy(pivotDoc._childFilters as ObjectField);
    pivotDoc['_prevDocRangeFilters' + prevFilterIndex] = ObjectField.MakeCopy(pivotDoc._childFiltersByRanges as ObjectField);
    pivotDoc['_prevPivotFields' + prevFilterIndex] = pivotField;
    pivotDoc._prevFilterIndex = ++prevFilterIndex;
    pivotDoc._childFilters = new List();
    setTimeout(
        action(() => {
            const filterVals = bounds.payload as string[];
            filterVals.map(filterVal => Doc.setDocFilter(pivotDoc, pivotField, filterVal, 'check'));
            const pivotView = DocumentManager.Instance.getDocumentView(pivotDoc);
            if (pivotDoc && pivotView?.ComponentView instanceof CollectionTimeView && filterVals.length === 1) {
                if (pivotView?.ComponentView.childDocs.length && pivotView.ComponentView.childDocs[0][filterVals[0]]) {
                    pivotDoc._pivotField = filterVals[0];
                }
            }
            const newFilters = StrListCast(pivotDoc._childFilters);
            if (newFilters.length && originalFilter.length && newFilters.lastElement() === originalFilter.lastElement()) {
                pivotDoc._prevFilterIndex = --prevFilterIndex;
                pivotDoc['_prevDocFilter' + prevFilterIndex] = undefined;
                pivotDoc['_prevDocRangeFilters' + prevFilterIndex] = undefined;
                pivotDoc['_prevPivotFields' + prevFilterIndex] = undefined;
            }
        })
    );
});