import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
// import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, InteractionItem, PointElement, LineElement } from 'chart.js';
// import { Bar, getDatasetAtEvent, getElementAtEvent, Line } from 'react-chartjs-2';
import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types';
import { action, computed, observable } from 'mobx';
import { Cast, StrCast } from '../../../../fields/Types';
// import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
import { LineChart } from './LineChart';

export interface ChartBoxProps {
    rootDoc: Doc;
    pairs: { x: number; y: number }[];
}

const primaryColor = 'rgba(53, 162, 235, 0.5)';
const selectedColor = 'rgba(255, 99, 132, 0.5)';

export interface RechartData {
    name: string | number;
    y: number;
}

export interface DataPoint {
    x: number;
    y: number;
}

export interface ChartData {
    xLabel: string;
    yLabel: string;
    data: DataPoint[];
    tooltipContent: (data: DataPoint) => string;
}

@observer
export class ChartBox extends React.Component<ChartBoxProps> {
    @observable private _chartData: ChartData | undefined = undefined;

    @computed get currView() {
        if (this.props.rootDoc._dataVizView) {
            return StrCast(this.props.rootDoc._currChartView);
        } else {
            return 'table';
        }
    }

    constructor(props: any) {
        super(props);
        if (!this.props.rootDoc._currChartView) {
            this.props.rootDoc._currChartView = 'bar';
        }
    }

    @action
    generateChartData() {
        if (this.props.rootDoc._chartData) {
            this._chartData = JSON.parse(StrCast(this.props.rootDoc._chartData));
            return;
        }

        const data: ChartData = {
            xLabel: '',
            yLabel: '',
            data: [],
            tooltipContent: (data: DataPoint) => {
                return `<b>x: ${data.x} y: ${data.y}</b>`;
            },
        };

        if (this.props.pairs && this.props.pairs.length > 0) {
            data.xLabel = 'x';
            data.yLabel = 'y';
            this.props.pairs.forEach(pair => {
                data.data.push({ x: pair.x, y: pair.y });
            });
        }

        this._chartData = data;
        this.props.rootDoc._chartData = JSON.stringify(data);
    }

    // @action
    // generateChartJsData() {
    //     if (this.props.rootDoc._chartData) {
    //         // parse the string into a json object
    //         this._chartJsData = JSON.parse(StrCast(this.props.rootDoc._chartData));
    //         this._prevColor = StrCast(this.props.rootDoc._prevColor);
    //         this._prevIndex = JSON.parse(StrCast(this.props.rootDoc._prevIndex));
    //         return;
    //     }
    //     const labels = this.props.pairs.map(p => p.x);
    //     const dataset = {
    //         label: 'Dataset 1',
    //         data: this.props.pairs.map(p => p.y),
    //         backgroundColor: this.props.pairs.map(p => primaryColor),
    //     };
    //     const data = {
    //         labels,
    //         datasets: [dataset],
    //     };
    //     this._chartJsData = data;
    // }

    componentDidMount() {
        // this.generateChartJsData();
        this.generateChartData();
    }

    @action
    onClickChangeChart = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        e.stopPropagation();
        console.log(e.currentTarget.value);
        this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
    };

    // @action
    // onClick = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
    //     e.preventDefault();
    //     console.log(e);

    //     if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return;
    //     if (!this._chartJsData) return;
    //     if (this._prevIndex && this._prevColor) {
    //         this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
    //     }

    //     const currSelected = getElementAtEvent(this._chartRef.current, e);
    //     // TODO - nda: the currSelected might not have the updated color variables so look into that
    //     this._currSelected = currSelected;
    //     const index = { datasetIndex: currSelected[0].datasetIndex, index: currSelected[0].index };
    //     this._prevIndex = { dIndex: index.datasetIndex, index: index.index };
    //     this._prevColor = this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index];
    //     this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index] = selectedColor;
    //     this._chartRef.current.update();
    //     // stringify this._chartJsData
    //     const strData = JSON.stringify(this._chartJsData);
    //     this.props.rootDoc._chartData = strData;
    //     this.props.rootDoc._prevColor = this._prevColor;
    //     this.props.rootDoc._prevIndex = JSON.stringify(this._prevIndex);
    // };

    onMouseMove = (e: CategoricalChartState) => {
        console.log(e);

        // pops up at 526 when it should be at 263
        // at 100%scale it pops up at 526 but mouse shows 263 at 50% scale
        if (e.chartX && e.chartY) {
            e.chartX += 263;
            e.chartY += 263;
        }
        // if (e.chartX && e.chartY) {
        //     e.chartX -= 200;
        //     e.chartY -= 200;
        // }
    };

    handleDotClick = (e: any) => {
        console.log(e);
    };

    // handleTextClick = (e: any) => {
    //     console.log(e);
    // }

    // @computed get reLineChart() {
    //     return (
    //         // <ResponsiveContainer width="80%" height="80%">
    //         <LineChart
    //             width={500}
    //             height={300}
    //             data={this._chartData}
    //             margin={{
    //                 top: 5,
    //                 right: 30,
    //                 left: 20,
    //                 bottom: 5,
    //             }}
    //             onMouseDown={e => console.log(e)}
    //             onMouseMove={e => this.onMouseMove(e)}>
    //             <CartesianGrid strokeDasharray="3 3" />
    //             <XAxis dataKey="name" onMouseDown={e => console.log(e)} />
    //             <YAxis />
    //             <Tooltip />
    //             <Legend />
    //             <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8, onClick: this.handleDotClick }} />
    //             {/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */}
    //         </LineChart>
    //         // </ResponsiveContainer>
    //     );
    // }

    render() {
        if (this.props.pairs && this._chartData) {
            return (
                <div>
                    <div>
                        {/*{this.props.rootDoc._currChartView == 'line' ? (
                            <Line ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
                        ) : (
                            <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
                        )} */}
                        {/* {this.reLineChart} */}
                        <LineChart width={500} height={300} data={this._chartData} />
                    </div>
                    <button onClick={e => this.onClickChangeChart(e)} value="line">
                        Line
                    </button>
                    <button onClick={e => this.onClickChangeChart(e)} value="bar">
                        Bar
                    </button>
                </div>
            );
        } else {
            return <div></div>;
        }
    }
}