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}[];
}

export interface ChartJsData {
    labels: number[];
    datasets: {
        label: string;
        data: number[];
        backgroundColor: string[];
    }[] 
}

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
  );
  
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>>();

    @observable private _prevColor: string | undefined= undefined;
    @observable private _prevIndex: { dIndex: number, index: number} | undefined = undefined;
    @observable private _chartJsData: ChartJsData | undefined= undefined;

    @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: this.props.pairs.map(p => primaryColor),
        }
        const data = {
            labels,
            datasets: [dataset]
        };
        this._chartJsData = data;
    }
    
    componentDidMount() {
        this.generateChartJsData();
    }

    @action
    onClick = (e: any) => {
        e.preventDefault();
        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);
        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();
    }

    render() {
        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>
        }
    }
}