import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { Doc } from "../../../../fields/Doc";
import { NumCast } from "../../../../fields/Types";
import "./HistogramBox.scss";

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


export class HistogramBox extends React.Component<HistogramBoxProps> {

    private origin = {x: 0.1 * this.width, y: 0.9 * this.height};

    @computed get width() {
        return NumCast(this.props.rootDoc.width);
    }

    @computed get height() {
        return NumCast(this.props.rootDoc.height);
    }

    @computed get x() {
        return NumCast(this.props.rootDoc.x);
    }

    @computed get y() {
        return NumCast(this.props.rootDoc.y);
    }

    @computed get generatePoints() {
        // evenly distribute points along the x axis
        const xVals: number[] = this.props.pairs.map(p => p.x);
        const yVals: number[] = this.props.pairs.map(p => p.y);

        const xMin = Math.min(...xVals);
        const xMax = Math.max(...xVals);
        const yMin = Math.min(...yVals);
        const yMax = Math.max(...yVals);

        const xRange = xMax - xMin;
        const yRange = yMax - yMin;

        const xScale = this.width / xRange;
        const yScale = this.height / yRange;

        const xOffset = (this.x + (0.1 * this.width)) - xMin * xScale;
        const yOffset = (this.y + (0.25 * this.height)) - yMin * yScale;

        const points: {
            x: number,
            y: number
        }[] = this.props.pairs.map(p => {
            return {
                x: (p.x * xScale + xOffset) + this.origin.x,
                y: (p.y * yScale + yOffset)
            }
        });

        return points;
    }

    @computed get generateGraphLine() {
        const points = this.generatePoints;
        // loop through points and create a line from each point to the next
        let lines: {
            x1: number,
            y1: number,
            x2: number,
            y2: number
        }[] = [];
        for (let i = 0; i < points.length - 1; i++) {
            lines.push({
                x1: points[i].x,
                y1: points[i].y,
                x2: points[i + 1].x,
                y2: points[i + 1].y
            });
        }
        // generate array of svg with lines
        let svgLines: JSX.Element[] = [];
        for (let i = 0; i < lines.length; i++) {
            svgLines.push(
                <line
                    className="svgLine"
                    key={i}
                    x1={lines[i].x1}
                    y1={lines[i].y1}
                    x2={lines[i].x2}
                    y2={lines[i].y2}
                    stroke="black"
                    strokeWidth={2}
                />
            );
        }

        let res = [];
        for (let i = 0; i < svgLines.length; i++) {
            res.push(<svg className="svgContainer">{svgLines[i]}</svg>)
        }
        return res;
    }

    @computed get generateAxes() {       

        const xAxis = {
            x1: 0.1 * this.width,
            x2: 0.9 * this.width,
            y1: 0.9 * this.height,
            y2: 0.9 * this.height,
        };

        const yAxis = {
            x1: 0.1 * this.width,
            x2: 0.1 * this.width,
            y1: 0.25 * this.height,
            y2: 0.9 * this.height,
        };


        return (
            [
                (<svg className="svgContainer">
                    {/* <line className="svgLine" x1={yAxis} y1={xAxis} x2={this.width - (0.1 * this.width)} y2={xAxis} /> */}
                    <line className="svgLine" x1={xAxis.x1} y1={xAxis.y1} x2={xAxis.x2} y2={xAxis.y2}/>

                    {/* <line className="svgLine" x1={yAxis} y1={xAxis} x2={yAxis} y2={this.y + 50} /> */}
                </svg>),
                (
                <svg className="svgContainer">
                    <line className="svgLine" x1={yAxis.x1} y1={yAxis.y1} x2={yAxis.x2} y2={yAxis.y2} />
                {/* <line className="svgLine" x1={yAxis} y1={xAxis} x2={yAxis} y2={this.y + 50} /> */}
                </svg>)
            ]
        )
    }


    render() {
        return (
            <div>histogram box
                {/* <svg className="svgContainer">
                    {this.generateSVGLine}
                </svg> */}
                {this.generateAxes[0]}
                {this.generateAxes[1]}
                {this.generateGraphLine.map(line => line)}
            </div>
        )
            
    }

}