import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Cast, StrCast } from '../../../../fields/Types';
import { CsvField } from '../../../../fields/URLField';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { FieldViewProps, FieldView } from '../FieldView';
import { ChartBox } from './ChartBox';
import './DataVizBox.scss';
import { TableBox } from './TableBox';

enum DataVizView {
    TABLE = 'table',
    HISTOGRAM = 'histogram',
}

@observer
export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
    @observable private pairs: { x: number; y: number }[] = [];

    // TODO: nda - make this use enum values instead
    // @observable private currView: DataVizView = DataVizView.TABLE;
    @computed get currView() {
        if (this.rootDoc._dataVizView) {
            return StrCast(this.rootDoc._dataVizView);
        } else {
            return 'table';
        }
    }

    constructor(props: any) {
        super(props);
        if (!this.rootDoc._dataVizView) {
            // TODO: nda - this might not always want to default to "table"
            this.rootDoc._dataVizView = 'table';
        }
    }

    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(DataVizBox, fieldKey);
    }

    @computed get selectView() {
        switch (this.currView) {
            case 'table':
                return <TableBox pairs={this.pairs} />;
            case 'histogram':
                return <ChartBox rootDoc={this.rootDoc} pairs={this.pairs} />;
            // case "histogram":
            //     return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)
        }
    }

    @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.createPairs();
        this.fetchData();
    }

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

    // handle changing the view using a button
    @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
        e.preventDefault();
        e.stopPropagation();
        this.rootDoc._dataVizView = this.currView == 'table' ? 'histogram' : 'table';
    }

    render() {
        if (this.pairs.length == 0) {
            return <div>Loading...</div>;
        }

        return (
            <div className="dataViz">
                <button onClick={e => this.changeViewHandler(e)}>Change View</button>
                {this.selectView}
            </div>
        );
    }
}