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,
  } from 'chart.js';
  import { Bar, getDatasetAtEvent, getElementAtEvent } from 'react-chartjs-2';
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
import { action, computed, observable } from "mobx";


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

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
  );
  
//   export const options = {
//     responsive: true,
//     plugins: {
//       legend: {
//         position: 'top' as const,
//       },
//       title: {
//         display: true,
//         text: 'Chart.js Bar Chart',
//       },
//     },
//   };
  
//   const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  
//   export const data = {
//     labels,
//     datasets: [
//       {
//         label: 'Dataset 1',
//         data: [100, 200, 300, 400, 500, 600, 700],
//         backgroundColor: 'rgba(255, 99, 132, 0.5)',
//       },
//       {
//         label: 'Dataset 2',
//         data: [700, 600, 500, 400, 300, 200, 100],
//         backgroundColor: 'rgba(53, 162, 235, 0.5)',
//       },
//     ],
//   };

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

@observer
export class ChartBox extends React.Component<ChartBoxProps> {
    private _chartRef: any = React.createRef<ChartJSOrUndefined<"bar", number[], string>>();

    // TODO: add alternate | undefined to all these variables
    @observable private _prevColor: string = undefined;
    @observable private _prevIndex: { dIndex: number, index: number} = undefined;
    // @observable private _chartJsData: {
    //     labels: number[];
    //     datasets: {
    //         label: string;
    //         data: number[];
    //         backgroundColor: string;
    //     }[];
    // } = undefined;
    @observable private _chartJsData: any = null;

    @computed get options() {
        return {
            responsive: true,
            plugins: {
                legend: {
                        position: 'top' as const,
                    },
                    title: {
                        display: true,
                        text: 'Bar Chart',
                    },
            },
        }
    }

    @action
    generateChartJsData() {
        const labels = this.props.pairs.map(p => p.x);
        const dataset = {
            label: 'Dataset 1',
            data: this.props.pairs.map(p => p.y),
            // backgroundColor: primaryColor 
            backgroundColor: this.props.pairs.map(p => primaryColor),
        }
        const data = {
            labels,
            datasets: [dataset]
        };
        this._chartJsData = data;
        // this._chartRef.current.update()
    }
    
    @computed get chartJsData() {
        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),
            // backgroundColor: primaryColor,
        }
        const data = {
            labels,
            datasets: [dataset]
        };
        return data;
    }

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

    @action
    onClick = (e: any) => {
        e.preventDefault();
        console.log(getDatasetAtEvent(this._chartRef.current, e));
        console.log(getElementAtEvent(this._chartRef.current, e));

        if (this._prevIndex && this._prevColor) {
            this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
        }


        const currSelected = getElementAtEvent(this._chartRef.current, e);
        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;
        // TODO: nda - send data back to the backend so that we know how to render the chart
        this._chartRef.current.update();
        console.log(this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index]);
    }

    render() {
        if (this.props.pairs && !this._chartJsData) this.generateChartJsData();
            
        if (this.props.pairs && this._chartJsData) {
            return <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />
        } else {
            return <div></div>
        }
    }
}