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 { Utils } from "../../../../Utils";
import { ViewBoxBaseComponent } from "../../DocComponent";
import { FieldViewProps, FieldView } from "../FieldView";
import { ChartBox } from "./ChartBox";
import "./DataVizBox.scss";
import { HistogramBox } from "./HistogramBox";
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);  }

    @action
    private async createPairs() {
        // const xVals: number[] = [0, 1, 2, 3, 4, 5];
        // // const yVals: number[] = [10, 20, 30, 40, 50, 60];
        // const yVals: number[] = [1, 2, 3, 4, 5, 6];
        // let pairs: {
        //     x: number,
        //     y:number
        // }[] = [];
        // if (xVals.length != yVals.length) return pairs;
        // for (let i = 0; i < xVals.length; i++) {
        //     pairs.push({x: xVals[i], y: yVals[i]});
        // }
        // this.pairs = pairs;
        // this.pairs = await this.fetchData();
    }

    @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();
    }

    // async fetchData() {
    //     console.log(Cast(this.dataDoc[this.fieldKey], CsvField));
    //     const uri = this.dataUrl?.url.href;
    //     console.log(uri);
    //     const res = await fetch("/csvData?uri=" + uri);
    //     return await res.json();
    // }
    
    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() {
        return (
            <div className="dataViz">
                <button onClick={(e) => this.changeViewHandler(e)}>Change View</button>
                {this.selectView}
            </div>
        );
    }
}