import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { action, computed, observable } from 'mobx';
import { NumCast, StrCast } from '../../../../fields/Types';
import { LineChart } from './components/LineChart';
import { Chart, ChartData } from './ChartInterface';
import { PinProps } from '../trails';

export interface ChartBoxProps {
    rootDoc: Doc;
    dataDoc: Doc;
    height: number;
    pairs: { x: number; y: number }[];
    setChartBox: (chartBox: ChartBox) => void;
    getAnchor: () => Doc;
}

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

@observer
export class ChartBox extends React.Component<ChartBoxProps> {
    @observable private _chartData: ChartData | undefined = undefined;
    private currChart: Chart | 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';
        }
    }

    setCurrChart = (chart: Chart) => {
        this.currChart = chart;
    };

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

        const data: ChartData = {
            xLabel: '',
            yLabel: '',
            data: [[]],
        };

        if (this.props.pairs && this.props.pairs.length > 0) {
            data.xLabel = 'x';
            data.yLabel = 'y';
            this.props.pairs.forEach(pair => {
                // TODO: nda - add actual support for multiple sets of data
                data.data[0].push({ x: pair.x, y: pair.y });
            });
        }

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

    componentDidMount = () => {
        this.generateChartData();
        this.props.setChartBox(this);
    };

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

    getAnchor = (pinProps?: PinProps) => this.currChart?._getAnchor(pinProps);

    restoreView = (data: Doc) => this.currChart?.restoreView(data);

    render() {
        if (this.props.pairs && this._chartData) {
            const width = NumCast(this.props.rootDoc._width) * 0.9;
            const height = this.props.height * 0.9;
            const margin = { top: 10, right: 50, bottom: 50, left: 50 };
            return <LineChart margin={margin} width={width} height={height} chartData={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} />;
        }
        return <div />;
    }
}