import { observer } from "mobx-react";
import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc";
import * as React from 'react';
import * as d3 from 'd3';
import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
import { LinkManager } from "../../../../util/LinkManager";
import { DocCast, StrCast} from "../../../../../fields/Types";
import { DocumentManager } from "../../../../util/DocumentManager";
import { Id } from "../../../../../fields/FieldSymbols";
import { DataVizBox } from "../DataVizBox";
import { PinProps, PresBox } from "../../trails";
import { Docs } from "../../../../documents/Documents";
import { List } from "../../../../../fields/List";
import './Chart.scss';
import { ColorPicker, EditableText, Size, Type } from "browndash-components";
import { FaFillDrip } from "react-icons/fa";

export interface HistogramProps {
    rootDoc: Doc;
    layoutDoc: Doc;
    axes: string[];
    pairs: { [key: string]: any }[];
    width: number;
    height: number;
    dataDoc: Doc;
    fieldKey: string;
    margin: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
}

@observer
export class Histogram extends React.Component<HistogramProps> {

    private _disposers: { [key: string]: IReactionDisposer } = {};
    private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
    private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
    private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
    private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
    private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
    @observable _currSelected: any | undefined = undefined;
    private curBarSelected: any = undefined;
    private selectedData: any = undefined;
    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates

    @computed get _histogramData() {
        if (this.props.axes.length < 1) return [];
        if (this.props.axes.length < 2) {
            var ax0 = this.props.axes[0];
            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalXData = true }
            return this.props.pairs
                ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
                .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
        };

        var ax0 = this.props.axes[0];
        var ax1 = this.props.axes[1];
        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalXData = true;}
        if (/\d/.test(this.props.pairs[0][ax1]) && this.props.pairs.length < this.maxBins) { this.numericalYData = true;}
        return this.props.pairs
            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
            .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
    }
    @computed get defaultGraphTitle(){
        var ax0 = this.props.axes[0];
        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1 || !this.numericalYData){
            return ax0 + " Histogram";
        }
        else return ax1 + " by " + ax0 + " Histogram";
    }    
    @computed get incomingLinks() {
        return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
            .filter(link => {
                return link.link_anchor_1 == this.props.rootDoc.draggedFrom}) // get links where this chart doc is the target of the link
            .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
    }
    @computed get incomingSelected() {
        // return selected x and y axes
        // otherwise, use the selection of whatever is linked to us
        return this.incomingLinks // all links that are pointing to this node
            .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
            .filter(dvb => dvb)
            .map(dvb => dvb.pairs?.filter((pair: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
            .lastElement();
    }
    @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
        if (this.numericalXData){
            const data = this.data(this._histogramData);
            return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
        }
        return {xMin:0, xMax:0, yMin:0, yMax:0}
    }
    componentWillUnmount() {
        Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
    }
    componentDidMount = () => {
        this._disposers.chartData = reaction(
            () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
            ({ dataSet, w, h }) => {
                if (dataSet!.length>0) {
                    this.drawChart(dataSet, w, h);

                    // redraw annotations when the chart data has changed, or the local or inherited selection has changed
                    this.clearAnnotations();
                    this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true);
                    this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
                }
            },
            { fireImmediately: true }
        );
        this._disposers.annos = reaction(
            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
            annotations => {
                // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
                // could be blue colored to make it look like anchor
                // this.drawAnnotations()
                // loop through annotations and draw them
                annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
                // this.drawAnnotations(annotations.x, annotations.y);
            },
            { fireImmediately: true }
        );
        this._disposers.highlights = reaction(
            () => ({
                selected: this._currSelected,
                incomingSelected: this.incomingSelected,
            }),
            ({ selected, incomingSelected }) => {
                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
                this.clearAnnotations();
                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
                incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
            },
            { fireImmediately: true }
        );
    };

    // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that

    clearAnnotations = () => {
        const elements = document.querySelectorAll('.datapoint');
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            element.classList.remove('brushed');
            element.classList.remove('selected');
        }
    };
    // gets called whenever the "data_annotations" fields gets updated
    drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
        // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
        // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
        // if it exists, then highlight it
        // if it doesn't exist, then remove the highlight
        const elements = document.querySelectorAll('.datapoint');
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            const x = element.getAttribute('data-x');
            const y = element.getAttribute('data-y');
            if (x === dataX.toString() && y === dataY.toString()) {
                element.classList.add(selected ? 'selected' : 'brushed');
            }
            // TODO: nda - this remove highlight code should go where we remove the links
            // } else {
            // }
        }
    };

    removeAnnotations(dataX: number, dataY: number) {
        // loop through and remove any annotations that no longer exist
    }

    @action
    restoreView = (data: Doc) => {};

    // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
    getAnchor = (pinProps?: PinProps) => {
        const anchor = Docs.Create.ConfigDocument({
            //
            title: 'histogram doc selection' + this._currSelected,
        });
        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
        anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
        return anchor;
    };

    @computed get height() {
        return this.props.height - this.props.margin.top - this.props.margin.bottom;
    }

    @computed get width() {
        return this.props.width - this.props.margin.left - this.props.margin.right;
    }

    data = (dataSet: any) => {
        var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
            var valid = true;
            Object.keys(dataSet[0]).map(key => {
                if (!d[key] || Number.isNaN(d[key])) valid = false;
            })
            return valid;
        })
        var field = dataSet[0]? Object.keys(dataSet[0])[0] : undefined;
        const data = validData.map((d: { [x: string]: any; }) => {
            if (this.numericalXData) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') }
            return d[field!]
        })
        return data;
    }

    drawChart = (dataSet: any, width: number, height: number) => {
        d3.select(this._histogramRef.current).select('svg').remove();
        d3.select(this._histogramRef.current).select('.tooltip').remove();

        var data = this.data(dataSet);
        
        var xAxisTitle = Object.keys(dataSet[0])[0]
        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
        let uniqueArr: unknown[] = [...new Set(data)]
        var numBins = (this.numericalXData && Number.isInteger(data[0][xAxisTitle]))? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
        var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
        if (numBins>this.maxBins) numBins = this.maxBins;
        var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
        var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins;
        var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
            var valid = true;
            Object.keys(dataSet[0]).map(key => {
                if (!d[key] || Number.isNaN(d[key])) valid = false;
            })
            return valid;
        });
        if (!this.numericalXData) {
            var histStringDataSet: { [x: string]: unknown; }[] = [];
            if (this.numericalYData){
                for (let i=0; i<dataSet.length; i++){
                    histStringDataSet.push({[yAxisTitle]: dataSet[i][yAxisTitle], [xAxisTitle]: dataSet[i][xAxisTitle]})
                }
            }
            else{
                for (let i=0; i<uniqueArr.length; i++){
                    histStringDataSet.push({[yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i]})
                }
                for (let i=0; i<data.length; i++){
                    let barData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
                    barData[0][yAxisTitle] = barData[0][yAxisTitle] + 1;
                }
            }
            histDataSet = histStringDataSet
        }

        var svg = (this._histogramSvg = d3
            .select(this._histogramRef.current)
            .append("svg")
                .attr("class", "graph")
                .attr("width", width + this.props.margin.right + this.props.margin.left)
                .attr("height", height + this.props.margin.top + this.props.margin.bottom)
            .append("g")
                .attr("transform",
                      "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));

        var x = d3.scaleLinear()
                .domain(this.numericalXData? [startingPoint!, endingPoint!] : [0, numBins])
                .range([0, width ]);
        var histogram = d3.histogram()
            .value(function(d) {return d})
            .domain([startingPoint!, endingPoint!])
            .thresholds(x.ticks(numBins-1))
        var bins = histogram(data)
        var eachRectWidth = width/(bins.length)
        var graphStartingPoint = bins[0].x1? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
        bins[0].x0 = graphStartingPoint;
        x = x.domain([graphStartingPoint, endingPoint])
             .range([0, Number.isInteger(this.rangeVals.xMin!)? (width-eachRectWidth) : width ])
        var xAxis;

        if (!this.numericalXData) { // reorganize if the data is strings rather than numbers
            // uniqueArr.sort()
            histDataSet.sort()
            for (let i=0; i<data.length; i++){
                var index = 0
                for (let j=0; j<uniqueArr.length; j++){
                    if (uniqueArr[j] == data[i]){
                        index = j;
                    }
                }
                bins[index].push(data[i])
            }
            bins.pop();
            eachRectWidth = width/(bins.length)
            bins.forEach(d => d.x0 = d.x0!)
            xAxis = d3.axisBottom(x)
                .ticks(bins.length-1)
                .tickFormat( i => uniqueArr[i])
                .tickPadding(10)
            x.range([0, width-eachRectWidth])
            x.domain([0, bins.length-1])
            translateXAxis = eachRectWidth / 2;
        }
        else {
            xAxis = d3.axisBottom(x)
                .ticks(numBins-1)
        }
        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
                    : d3.max(bins, function(d) { return d.length; })

        var y = d3.scaleLinear()
            .range([height, 0]);
            y.domain([0, +maxFrequency!]);
        var yAxis = d3.axisLeft(y)
            .ticks(maxFrequency!)
        svg.append("g")
            .call(yAxis);
        svg.append("g")
            .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
            .call(xAxis)
        
        const onPointClick = action((e: any) => {
            var pointerX = d3.pointer(e)[0];
            var sameAsCurrent: boolean;
            var barCounter = -1;
            const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
                barCounter++;
                if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
                    var showSelected = this.numericalYData? this._histogramData.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] 
                    : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0];
                    if (this.numericalXData){
                        if (d[0] && d[1] && d[0]!=d[1]){
                            showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
                        }
                        else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
                    } 
                    sameAsCurrent = this._currSelected? 
                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
                      && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
                        : false;
                    this._currSelected = sameAsCurrent? undefined: showSelected;
                    this.selectedData = sameAsCurrent? undefined: d;
                    return true
                }
                return false;
            });
            if (sameAsCurrent!) this.curBarSelected = undefined;
            else this.curBarSelected = selected;
        });
        svg.on('click', onPointClick);

        var selected = this.selectedData;
        svg.append("text")
            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
            .style("text-anchor", "middle")
            .text(xAxisTitle);
        svg.append("text")
            .attr("transform", "rotate(-90)" + " " + "translate( 0, " + -10 + ")")
            .attr("x", -(height/2))
            .attr("y", -20)
            .style("text-anchor", "middle")
            .text(yAxisTitle);
        d3.format('.0f')
        svg.selectAll("rect")
            .data(bins)
            .enter()
            .append("rect")
              .attr("transform", this.numericalYData?
                    function (d) {
                        var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                        return "translate(" + x(d.x0!) + "," + y(length) + ")";
                    }
                    : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
              .attr("height", this.numericalYData? 
                    function(d) {
                        var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                        return height-y(length)}
                    : function(d) { 
                        return height - y(d.length)})
              .attr("width", eachRectWidth)
              .attr("class", selected? 
                    function(d) {
                        return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
                    }: function(d) {return 'histogram-bar'})
              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
    };

    @action changeSelectedColor = (color: string) => {
        this.curBarSelected.attr("fill", color);
        var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
        this.props.layoutDoc['histogramBarColors-'+barName] = color;
    };
    
    @action changeDefaultColor = (color: string) => {
        const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
            if (this.props.layoutDoc['histogramBarColors-'+d[0]]) return false;
            else return true;
        })
        defaultColorBars.attr("fill", color);
        this.props.layoutDoc['defaultHistogramColor'] = color;
    };

    render() {
        var curSelectedBarName;
        var titleAccessor: any='';
        if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
        else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0];
        if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
        if (!this.props.layoutDoc['defaultHistogramColor']) this.props.layoutDoc['defaultHistogramColor'] = '#69b3a2';
        var selected: string;
        if (this._currSelected){
            curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
            selected = '{ ';
            Object.keys(this._currSelected).map(key => {
                key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
            })
            selected = selected.substring(0, selected.length-2);
            selected += ' }';
        }
        else selected = 'none';

        this.componentDidMount();
        return (
            this.props.axes.length >= 1 ? (
            <div className="chart-container" >
                <div className="graph-title"> 
                    <EditableText
                        val={StrCast(this.props.layoutDoc[titleAccessor])}
                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
                        color={"black"}
                        size={Size.LARGE}
                        fillWidth
                    />
                    &nbsp; &nbsp; 
                    <ColorPicker
                        tooltip={'Change Default Bar Color'} 
                        type={Type.SEC} 
                        icon={<FaFillDrip/>}
                        selectedColor={StrCast(this.props.layoutDoc['defaultHistogramColor'])}
                        setSelectedColor={color => this.changeDefaultColor(color)}
                        size={Size.XSMALL}
                    />
                </div>
                {selected != 'none' ? 
                    <div className={'selected-data'}>
                        Selected: {selected}
                        &nbsp; &nbsp;
                        <ColorPicker
                            tooltip={'Change Slice Color'} 
                            type={Type.SEC} 
                            icon={<FaFillDrip/>}
                            selectedColor={this.props.layoutDoc['histogramBarColors-'+curSelectedBarName]? this.props.layoutDoc['histogramBarColors-'+curSelectedBarName] : this.curBarSelected.attr("fill")}
                            setSelectedColor={color => this.changeSelectedColor(color)}
                            size={Size.XSMALL}
                        />
                    </div>
                : null}
                <div ref={this._histogramRef} />
            </div>
            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
        );
    }

}