import React from "react";
import "./App.css";
import CanvasJSReact from "./canvasjs.react";
import "antd/dist/antd.css";
import { Button, Slider, InputNumber } from "antd";

var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends React.Component {
    state = {
        isStopped: true,
        integral: 0,
        derivative: 0,
        setpoint: 0,
        kp: 1.2,
        ki: 0.003,
        kd: 0
    };

    componentDidMount() {
        setInterval(this.updateChart, updateInterval);
    }

    onToggleClick = () => {
        this.setState({
            isStopped: !this.state.isStopped
        });
    };

    onResetClick = () => {
        this.setState({
            isStopped: true,
            derivative: 0,
            integral: 0
        });

        velocities = [
            {
                x: 0.1,
                y: 0
            }
        ];

        errors = [
            {
                x: 0.1,
                y: velocities[0].y
            }
        ];

        outputs = [
            {
                x: 0.1,
                y: 0
            }
        ];

        this.velocitiesChart.options.data[0].dataPoints = velocities;
        this.errorsChart.options.data[0].dataPoints = errors;
        this.outputsChart.options.data[0].dataPoints = outputs;

        this.velocitiesChart.render();
        this.errorsChart.render();
        this.outputsChart.render();
    };

    onSetpointChange = value => {
        this.setState({
            setpoint: value
        });
    };

    onKpChange = value => {
        this.setState({
            kp: value
        });
    };

    onKiChange = value => {
        this.setState({
            ki: value
        });
    };

    onKdChange = value => {
        this.setState({
            kd: value
        });
    };

    updateChart = () => {
        if (!this.state.isStopped) {
            this.calculate();

            this.velocitiesChart.render();
            this.errorsChart.render();
            this.outputsChart.render();
        }
    };

    calculate = () => {
        this.calculateErrorAndFactors();
        this.calculateOutput();
        this.calculateVelicity();

        this.shiftArrays();
    };

    calculateErrorAndFactors = () => {
        const previousError = errors[errors.length - 1].y;

        let errorX = errors[errors.length - 1].x + updateInterval / 1000;
        let errorY = this.state.setpoint - velocities[velocities.length - 1].y;

        this.setState({
            integral: this.state.integral + errorY * updateInterval
        });
        this.setState({
            derivative:
                this.state.derivative +
                (errorY - previousError) / updateInterval
        });

        errors.push({ x: errorX, y: errorY });
    };

    calculateOutput = () => {
        let outputX = outputs[outputs.length - 1].x + 0.1;
        let outputY =
            this.state.kp * errors[errors.length - 1].y +
            this.state.ki * this.state.integral +
            this.state.kd * this.state.derivative;

        outputs.push({ x: outputX, y: outputY });
    };

    calculateVelicity = () => {
        const previousVelocity = velocities[velocities.length - 1].y;

        let velocityX = velocities[velocities.length - 1].x + 0.1;
        let velocityY =
            previousVelocity +
            outputs[outputs.length - 1].y * 0.03 -
            previousVelocity * 0.15;

        if (velocityY < 0) velocityY = 0;

        velocities.push({ x: velocityX, y: velocityY });
    };

    shiftArrays = () => {
        if (velocities.length > maxChartLength) velocities.shift();
        if (errors.length > maxChartLength) errors.shift();
        if (outputs.length > maxChartLength) outputs.shift();
    };

    render() {
        return (
            <div className="container">
                <div className="charts">
                    <CanvasJSChart
                        options={errorOptions}
                        onRef={ref => (this.errorsChart = ref)}
                    />
                    <CanvasJSChart
                        options={outputOptions}
                        onRef={ref => (this.outputsChart = ref)}
                    />
                    <CanvasJSChart
                        options={velocityOptions}
                        onRef={ref => (this.velocitiesChart = ref)}
                    />
                </div>
                <div className="controls">
                    <div className="controls__toggle">
                        {this.state.isStopped ? (
                            <Button
                                type="primary"
                                onClick={this.onToggleClick}
                                className="toggle__button"
                            >
                                Start
                            </Button>
                        ) : (
                            <Button
                                type="danger"
                                onClick={this.onToggleClick}
                                className="toggle__button"
                            >
                                Stop
                            </Button>
                        )}
                        <Button
                            onClick={this.onResetClick}
                            className="toggle__reset"
                        >
                            Reset
                        </Button>
                    </div>
                    <div className="controls__inputs">
                        <div className="inputs__group">
                            <span>Prędkość zadana:</span>
                            <Slider
                                min={0}
                                max={200}
                                onChange={this.onSetpointChange}
                                value={this.state.setpoint}
                                style={{ width: "100%" }}
                            />
                            <InputNumber
                                min={0}
                                max={200}
                                onChange={this.onSetpointChange}
                                value={this.state.setpoint}
                                formatter={value => `${value} km/h`}
                                parser={value => value.replace(" km/h", "")}
                            />
                        </div>
                        <div className="inputs__group">
                            <span>Kp:</span>
                            <Slider
                                min={0}
                                max={10}
                                step={0.001}
                                onChange={this.onKpChange}
                                value={this.state.kp}
                                style={{ width: "100%" }}
                            />
                            <InputNumber
                                min={0}
                                max={10}
                                value={this.state.kp}
                                step={0.01}
                                onChange={this.onKpChange}
                            />
                        </div>
                        <div className="inputs__group">
                            <span>Ki:</span>
                            <Slider
                                min={0}
                                max={0.1}
                                step={0.001}
                                onChange={this.onKiChange}
                                value={this.state.ki}
                                style={{ width: "100%" }}
                            />
                            <InputNumber
                                min={0}
                                max={0.1}
                                value={this.state.ki}
                                step={0.001}
                                onChange={this.onKiChange}
                            />
                        </div>
                        <div className="inputs__group">
                            <span>Kd:</span>
                            <Slider
                                min={0}
                                max={30}
                                step={0.1}
                                onChange={this.onKdChange}
                                value={this.state.kd}
                                style={{ width: "100%" }}
                            />
                            <InputNumber
                                min={0}
                                max={30}
                                value={this.state.kd}
                                step={0.1}
                                onChange={this.onKdChange}
                            />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

var updateInterval = 100;
var maxChartLength = 500;

var velocities = [
    {
        x: 0.1,
        y: 0
    }
];

var errors = [
    {
        x: 0.1,
        y: velocities[0].y
    }
];

var outputs = [
    {
        x: 0.1,
        y: 0
    }
];

const velocityOptions = {
    animationEnabled: true,
    zoomEnabled: true,
    theme: "light2",
    title: {
        text: "Tempomat"
    },
    axisX: {
        title: "Czas",
        suffix: "s"
    },
    axisY: {
        title: "Prędkość",
        suffix: "km/h"
    },
    data: [
        {
            type: "line",
            xValueFormatString: "##.#s",
            yValueFormatString: "###km/h",
            dataPoints: velocities
        }
    ]
};

const errorOptions = {
    animationEnabled: true,
    zoomEnabled: true,
    theme: "light2",
    title: {
        text: "Błąd"
    },
    axisX: {
        title: "Czas",
        suffix: "s"
    },
    data: [
        {
            type: "line",
            xValueFormatString: "##.#s",
            dataPoints: errors
        }
    ]
};

const outputOptions = {
    animationEnabled: true,
    zoomEnabled: true,
    theme: "light2",
    title: {
        text: "Sterowanie"
    },
    axisX: {
        title: "Czas",
        suffix: "s"
    },
    data: [
        {
            type: "line",
            xValueFormatString: "##.#s",
            dataPoints: outputs
        }
    ]
};