import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { Cast, NumCast, StrCast } from '../../../../fields/Types';
import { CsvField } from '../../../../fields/URLField';
import { Docs } from '../../../documents/Documents';
import { ViewBoxAnnotatableComponent } from '../../DocComponent';
import { FieldView, FieldViewProps } from '../FieldView';
import { PinProps } from '../trails';
import { LineChart } from './components/LineChart';
import { TableBox } from './components/TableBox';
import './DataVizBox.scss';

enum DataVizView {
    TABLE = 'table',
    LINECHART = 'lineChart',
}

@observer
export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(DataVizBox, fieldKey);
    }
    // says we have an object and any string
    // 2 ways of doing it
    // @observable private pairs: { [key: string]: number | string | undefined }[] = [];
    // @observable private pairs: { [key: string]: FieldResult }[] = [];
    @observable private pairs: { x: number; y: number }[] = [];
    private _chartRenderer: LineChart | undefined;
    // // another way would be store a schema that defines the type of data we are expecting from an imported doc

    // method1() {
    //     this.pairs[0].x = 3;
    // }

    // method() {
    //     // this.pairs[0].x = 3;
    //     // go through the pairs
    //     const x = this.pairs[0].x;
    //     if (typeof x == 'number') {
    //         let x1 = Number(x);
    //         // let x1 = NumCast(x);
    //     }
    // }

    // could use field result
    // [key: string]: FieldResult;
    // instead of numeric x,y in there,

    // TODO: nda - use onmousedown and onmouseup when dragging and changing height and width to update the height and width props only when dragging stops

    @computed get dataVizView(): DataVizView {
        return StrCast(this.rootDoc._dataVizView, 'table') as DataVizView;
    }

    @action
    restoreView = (data: Doc) => {
        const changed = this.dataVizView !== data.presDataVizView && (this.rootDoc._dataVizView = data.presDataVizView);
        const func = () => this._chartRenderer?.restoreView(data);
        if (changed) {
            setTimeout(func, 100);
            return changed ? true : false;
        }
        return func() ?? false;
    };

    getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
        const anchor =
            this._chartRenderer?.getAnchor(pinProps) ??
            Docs.Create.TextanchorDocument({
                // when we clear selection -> we should have it so chartBox getAnchor returns undefined
                // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
                /*put in some options*/
            });

        anchor.presDataVizView = this.dataVizView;

        this.addDocument(anchor);
        return anchor;
    };

    @computed get selectView() {
        const width = NumCast(this.rootDoc._width) * 0.9;
        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
        const margin = { top: 10, right: 50, bottom: 50, left: 50 };
        // prettier-ignore
        switch (this.dataVizView) {
            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} />;
            case DataVizView.LINECHART: return <LineChart ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} pairs={this.pairs} dataDoc={this.dataDoc} />;
        }
    }

    @computed get pairVals() {
        return fetch('/csvData?uri=' + this.dataUrl?.url.href).then(res => res.json());
    }

    @computed get dataUrl() {
        return Cast(this.dataDoc[this.fieldKey], CsvField);
    }

    componentDidMount() {
        this.props.setContentView?.(this);
        this.fetchData();
    }

    fetchData() {
        fetch('/csvData?uri=' + this.dataUrl?.url.href) //
            .then(res => res.json().then(action(res => !res.errno && (this.pairs = res))));
    }

    // handle changing the view using a button
    @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
        e.preventDefault();
        e.stopPropagation();
        this.rootDoc._dataVizView = this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE;
    }

    render() {
        return this.pairs.length == 0 ? (
            <div>Loading...</div>
        ) : (
            <div
                className="dataViz"
                onWheel={e => e.stopPropagation()}
                ref={r =>
                    r?.addEventListener(
                        'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
                        (e: WheelEvent) => {
                            if (!r.scrollTop && e.deltaY <= 0) e.preventDefault();
                            e.stopPropagation();
                        },
                        { passive: false }
                    )
                }>
                <button onClick={e => this.changeViewHandler(e)}>Change View</button>
                {this.selectView}
            </div>
        );
    }
}