import { computed, trace } from 'mobx';
import { observer } from 'mobx-react';
import './PhysicsSimulationBox.scss';
import React = require('react');

interface IWallProps {
    length: number;
    xPos: number;
    yPos: number;
    angleInDegrees: number;
}
interface IForce {
    description: string;
    magnitude: number;
    directionInDegrees: number;
    component: boolean;
}
export interface IWeightProps {
    pause: () => void;
    panelWidth: () => number;
    panelHeight: () => number;
    circularMotionRadius: number;
    coefficientOfKineticFriction: number;
    color: string;
    componentForces: () => IForce[];
    setComponentForces: (x: IForce[]) => {};
    displayXVelocity: number;
    displayYVelocity: number;
    elasticCollisions: boolean;
    gravity: number;
    mass: number;
    simulationMode: string;
    noMovement: boolean;
    paused: boolean;
    pendulumAngle: number;
    pendulumLength: number;
    radius: number;
    reset: boolean;
    showAcceleration: boolean;
    showComponentForces: boolean;
    showForceMagnitudes: boolean;
    showForces: boolean;
    showVelocity: boolean;
    simulationSpeed: number;
    simulationType: string;
    springConstant: number;
    springRestLength: number;
    springStartLength: number;
    startForces: () => IForce[];
    startPendulumAngle: number;
    startPendulumLength: number;
    startPosX: number;
    startPosY: number;
    startVelX: number;
    startVelY: number;
    timestepSize: number;
    updateMassPosX: number;
    updateMassPosY: number;
    forcesUpdated: () => IForce[];
    setForcesUpdated: (x: IForce[]) => {};
    setPosition: (x: number | undefined, y: number | undefined) => void;
    setVelocity: (x: number | undefined, y: number | undefined) => void;
    setAcceleration: (x: number, y: number) => void;
    setPendulumAngle: (ang: number | undefined, length: number | undefined) => void;
    setSpringLength: (length: number) => void;
    wallPositions: IWallProps[];
    wedgeHeight: number;
    wedgeWidth: number;
    xMax: number;
    xMin: number;
    yMax: number;
    yMin: number;
}

interface IState {
    angleLabel: number;
    clickPositionX: number;
    clickPositionY: number;
    coordinates: string;
    dragging: boolean;
    kineticFriction: boolean;
    maxPosYConservation: number;
    timer: number;
    updatedStartPosX: any;
    updatedStartPosY: any;
    walls: IWallProps[];
    xPosition: any;
    xVelocity: number;
    yPosition: any;
    yVelocity: number;
    xAccel: number;
    yAccel: number;
}
@observer
export default class Weight extends React.Component<IWeightProps, IState> {
    constructor(props: any) {
        super(props);
        this.state = {
            angleLabel: 0,
            clickPositionX: 0,
            clickPositionY: 0,
            coordinates: '',
            dragging: false,
            kineticFriction: false,
            maxPosYConservation: 0,
            timer: 0,
            updatedStartPosX: this.props.startPosX ?? 0,
            updatedStartPosY: this.props.startPosY ?? 0,
            walls: [],
            xPosition: this.props.startPosX ?? 0,
            xVelocity: this.props.startVelX ? this.props.startVelX : 0,
            yPosition: this.props.startPosY ?? 0,
            yVelocity: this.props.startVelY ? this.props.startVelY : 0,
            xAccel: 0,
            yAccel: 0,
        };
    }

    componentDidMount() {
        // Timer for animating the simulation
        setInterval(() => {
            this.setState({ timer: this.state.timer + 1 });
        }, 50);
    }

    // Constants
    @computed get draggable() {
        return this.props.simulationType != 'Inclined Plane' && this.props.simulationType != 'Pendulum' && this.props.simulationMode == 'Freeform';
    }
    epsilon = 0.0001;
    labelBackgroundColor = `rgba(255,255,255,0.5)`;

    // Variables
    weightStyle = {
        alignItems: 'center',
        backgroundColor: this.props.color,
        borderColor: 'black',
        borderRadius: 50 + '%',
        borderStyle: 'solid',
        display: 'flex',
        height: 2 * this.props.radius + 'px',
        justifyContent: 'center',
        left: this.props.startPosX + 'px',
        position: 'absolute' as 'absolute',
        top: this.props.startPosY + 'px',
        touchAction: 'none',
        width: 2 * this.props.radius + 'px',
        zIndex: 5,
    };

    // Helper function to go between display and real values
    getDisplayYPos = (yPos: number) => this.props.yMax - yPos - 2 * this.props.radius + 5;

    // Update display values when simulation updates
    setDisplayValues = (xPos: number = this.state.xPosition, yPos: number = this.state.yPosition, xVel: number = this.state.xVelocity, yVel: number = this.state.yVelocity) => {
        this.props.setPosition(xPos, this.getDisplayYPos(yPos));
        this.props.setVelocity(xVel, yVel);
        const xAccel = Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100;
        const yAccel = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100;
        this.props.setAcceleration(xAccel, yAccel);
        this.setState({ xAccel });
        this.setState({ yAccel });
    };

    componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
        if (prevProps.simulationType != this.props.simulationType) {
            this.setState({ xVelocity: this.props.startVelX });
            this.setState({ yVelocity: this.props.startVelY });
            this.setDisplayValues();
        }

        // Change pendulum angle from input field
        if (prevProps.startPendulumAngle != this.props.startPendulumAngle || prevProps.startPendulumLength !== this.props.startPendulumLength) {
            let length = this.props.startPendulumLength;
            const x = length * Math.cos(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
            const y = length * Math.sin(((90 - this.props.startPendulumAngle) * Math.PI) / 180);
            const xPos = this.props.xMax / 2 - x - this.props.radius;
            const yPos = y - this.props.radius - 5;
            this.setState({ xPosition: xPos });
            this.setState({ yPosition: yPos });
            this.setState({ updatedStartPosX: xPos });
            this.setState({ updatedStartPosY: yPos });
            this.props.setPendulumAngle(this.props.startPendulumAngle, this.props.startPendulumLength);
        }

        // When display values updated by user, update real value
        if (prevProps.updateMassPosX !== this.props.updateMassPosX) {
            let x = this.props.updateMassPosX;
            x = Math.max(0, x);
            x = Math.min(x, this.props.xMax - 2 * this.props.radius);
            this.setState({ updatedStartPosX: x });
            this.setState({ xPosition: x });
            this.props.setPosition(x, undefined);
        }
        if (prevProps.updateMassPosY != this.props.updateMassPosY) {
            let y = this.props.updateMassPosY;
            y = Math.max(0, y);
            y = Math.min(y, this.props.yMax - 2 * this.props.radius);
            let coordinatePosition = this.getDisplayYPos(y);
            this.setState({ updatedStartPosY: coordinatePosition });
            this.setState({ yPosition: coordinatePosition });
            this.props.setPosition(undefined, this.getDisplayYPos(y));

            if (this.props.displayXVelocity != this.state.xVelocity) {
                let x = this.props.displayXVelocity;
                this.setState({ xVelocity: x });
                this.props.setVelocity(x, undefined);
            }

            if (this.props.displayYVelocity != -this.state.yVelocity) {
                let y = this.props.displayYVelocity;
                this.setState({ yVelocity: -y });
                this.props.setVelocity(undefined, y);
            }
        }

        // Make sure weight doesn't go above max height
        if ((prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) && !isNaN(this.state.updatedStartPosY) && !isNaN(this.props.startVelY)) {
            if (this.props.simulationType == 'One Weight') {
                let maxYPos = this.state.updatedStartPosY;
                if (this.props.startVelY != 0) {
                    maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * Math.abs(this.props.gravity));
                }
                if (maxYPos < 0) {
                    maxYPos = 0;
                }
                this.setState({ maxPosYConservation: maxYPos });
            }
        }

        // Check for collisions and update
        if (!this.props.paused) {
            if (prevState.timer != this.state.timer) {
                if (!this.props.noMovement) {
                    let collisions = false;
                    if (this.props.simulationType == 'One Weight' || this.props.simulationType == 'Inclined Plane') {
                        const collisionsWithGround = this.checkForCollisionsWithGround();
                        const collisionsWithWalls = this.checkForCollisionsWithWall();
                        collisions = collisionsWithGround || collisionsWithWalls;
                    }
                    if (this.props.simulationType == 'Pulley') {
                        if (this.state.yPosition <= this.props.yMin + 100 || this.state.yPosition >= this.props.yMax - 100) {
                            collisions = true;
                        }
                    }
                    if (!collisions) {
                        this.update();
                    }
                    this.setDisplayValues();
                }
            }
        }

        // Reset everything on reset button click
        if (prevProps.reset != this.props.reset) {
            this.resetEverything();
        }

        // Convert from static to kinetic friction if/when weight slips on inclined plane
        if (prevState.xVelocity != this.state.xVelocity) {
            if (this.props.simulationType == 'Inclined Plane' && Math.abs(this.state.xVelocity) > 0.1 && this.props.simulationMode != 'Review' && !this.state.kineticFriction) {
                this.setState({ kineticFriction: true });
                const normalForce: IForce = {
                    description: 'Normal Force',
                    magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                    directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
                    component: false,
                };
                let frictionForce: IForce = {
                    description: 'Kinetic Friction Force',
                    magnitude: this.props.mass * this.props.coefficientOfKineticFriction * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                    directionInDegrees: 180 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
                    component: false,
                };
                // reduce magnitude of friction force if necessary such that block cannot slide up plane
                let yForce = -Math.abs(this.props.gravity);
                yForce += normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180);
                yForce += frictionForce.magnitude * Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
                if (yForce > 0) {
                    frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + Math.abs(this.props.gravity)) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
                }

                const frictionForceComponent: IForce = {
                    description: 'Kinetic Friction Force',

                    magnitude: this.props.mass * this.props.coefficientOfKineticFriction * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                    directionInDegrees: 180 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
                    component: true,
                };
                const normalForceComponent: IForce = {
                    description: 'Normal Force',
                    magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                    directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
                    component: true,
                };
                const gravityParallel: IForce = {
                    description: 'Gravity Parallel Component',
                    magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.sin(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                    directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI + 180,
                    component: true,
                };
                const gravityPerpendicular: IForce = {
                    description: 'Gravity Perpendicular Component',
                    magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.cos(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                    directionInDegrees: 360 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
                    component: true,
                };
                const gravityForce: IForce = {
                    description: 'Gravity',
                    magnitude: this.props.mass * Math.abs(this.props.gravity),
                    directionInDegrees: 270,
                    component: false,
                };
                if (this.props.coefficientOfKineticFriction != 0) {
                    this.props.setForcesUpdated([gravityForce, normalForce, frictionForce]);
                    this.props.setComponentForces([frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular]);
                } else {
                    this.props.setForcesUpdated([gravityForce, normalForce]);
                    this.props.setComponentForces([normalForceComponent, gravityParallel, gravityPerpendicular]);
                }
            }
        }

        // Add/remove walls when simulation type changes
        if (prevProps.simulationType != this.props.simulationType) {
            let w: IWallProps[] = [];
            if (this.props.simulationType == 'One Weight' || this.props.simulationType == 'Inclined Plane') {
                w = this.props.wallPositions;
            }
            this.setState({ walls: w });
        }

        // Update x position when start pos x changes
        if (prevProps.startPosX != this.props.startPosX) {
            if (this.props.paused && !isNaN(this.props.startPosX)) {
                this.setState({ xPosition: this.props.startPosX });
                this.setState({ updatedStartPosX: this.props.startPosX });
                this.props.setPosition(this.props.startPosX, undefined);
            }
        }

        // Update y position when start pos y changes TODO debug
        if (prevProps.startPosY != this.props.startPosY) {
            if (this.props.paused && !isNaN(this.props.startPosY)) {
                this.setState({ yPosition: this.props.startPosY });
                this.setState({ updatedStartPosY: this.props.startPosY ?? 0 });
                this.props.setPosition(undefined, this.getDisplayYPos(this.props.startPosY));
            }
        }

        // Update wedge coordinates
        if (this.state.coordinates === '' || prevProps.wedgeWidth != this.props.wedgeWidth || prevProps.wedgeHeight != this.props.wedgeHeight) {
            const left = this.props.xMax * 0.25;
            const coordinatePair1 = Math.round(left) + ',' + this.props.yMax + ' ';
            const coordinatePair2 = Math.round(left + this.props.wedgeWidth) + ',' + this.props.yMax + ' ';
            const coordinatePair3 = Math.round(left) + ',' + (this.props.yMax - this.props.wedgeHeight);
            const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
            this.setState({ coordinates: coord });
        }

        if (this.state.xPosition != prevState.xPosition || this.state.yPosition != prevState.yPosition) {
            this.weightStyle = {
                alignItems: 'center',
                backgroundColor: this.props.color,
                borderColor: 'black',
                borderRadius: 50 + '%',
                borderStyle: 'solid',
                display: 'flex',
                height: 2 * this.props.radius + 'px',
                justifyContent: 'center',
                left: this.state.xPosition + 'px',
                position: 'absolute' as 'absolute',
                top: this.state.yPosition + 'px',
                touchAction: 'none',
                width: 2 * this.props.radius + 'px',
                zIndex: 5,
            };
        }
    }

    // Reset simulation on reset button click
    resetEverything = () => {
        this.setState({ kineticFriction: false });
        this.setState({ xPosition: this.state.updatedStartPosX });
        this.setState({ yPosition: this.state.updatedStartPosY });
        this.setState({ xVelocity: this.props.startVelX });
        this.setState({ yVelocity: this.props.startVelY });
        this.props.setPendulumAngle(this.props.startPendulumAngle, undefined);
        this.props.setForcesUpdated(this.props.startForces());
        this.props.setPosition(this.state.updatedStartPosX, this.state.updatedStartPosY);
        this.props.setVelocity(this.props.startVelX, this.props.startVelY);
        this.props.setAcceleration(0, 0);
        this.setState({ angleLabel: Math.round(this.props.pendulumAngle * 100) / 100 });
    };

    // Compute x acceleration from forces, F=ma
    getNewAccelerationX = (forceList: IForce[]) => {
        let newXAcc = 0;
        if (forceList) {
            forceList.forEach(force => {
                newXAcc += (force.magnitude * Math.cos((force.directionInDegrees * Math.PI) / 180)) / this.props.mass;
            });
        }
        return newXAcc;
    };

    // Compute y acceleration from forces, F=ma
    getNewAccelerationY = (forceList: IForce[]) => {
        let newYAcc = 0;
        if (forceList) {
            forceList.forEach(force => {
                newYAcc += (-1 * (force.magnitude * Math.sin((force.directionInDegrees * Math.PI) / 180))) / this.props.mass;
            });
        }
        return newYAcc;
    };

    // Compute uniform circular motion forces given x, y positions
    getNewCircularMotionForces = (xPos: number, yPos: number) => {
        let deltaX = (this.props.xMin + this.props.xMax) / 2 - (xPos + this.props.radius);
        let deltaY = yPos + this.props.radius - (this.props.yMin + this.props.yMax) / 2;
        let dir = (Math.atan2(deltaY, deltaX) * 180) / Math.PI;
        const tensionForce: IForce = {
            description: 'Centripetal Force',
            magnitude: (this.props.startVelX ** 2 * this.props.mass) / this.props.circularMotionRadius,
            directionInDegrees: dir,
            component: false,
        };
        return [tensionForce];
    };

    // Compute spring forces given y position
    getNewSpringForces = (yPos: number) => {
        let springForce: IForce = {
            description: 'Spring Force',
            magnitude: 0,
            directionInDegrees: 90,
            component: false,
        };
        if (yPos - this.props.springRestLength > 0) {
            springForce = {
                description: 'Spring Force',
                magnitude: this.props.springConstant * (yPos - this.props.springRestLength),
                directionInDegrees: 90,
                component: false,
            };
        } else if (yPos - this.props.springRestLength < 0) {
            springForce = {
                description: 'Spring Force',
                magnitude: this.props.springConstant * (this.props.springRestLength - yPos),
                directionInDegrees: 270,
                component: false,
            };
        }
        return [
            {
                description: 'Gravity',
                magnitude: Math.abs(this.props.gravity) * this.props.mass,
                directionInDegrees: 270,
                component: false,
            },
            springForce,
        ];
    };

    // Compute pendulum forces given position, velocity
    getNewPendulumForces = (xPos: number, yPos: number, xVel: number, yVel: number) => {
        const x = this.props.xMax / 2 - xPos - this.props.radius;
        const y = yPos + this.props.radius + 5;
        let angle = (Math.atan(y / x) * 180) / Math.PI;
        if (angle < 0) {
            angle += 180;
        }
        let oppositeAngle = 90 - angle;
        if (oppositeAngle < 0) {
            oppositeAngle = 90 - (180 - angle);
        }

        const pendulumLength = Math.sqrt(x * x + y * y);
        this.props.setPendulumAngle(oppositeAngle, undefined);

        const mag = this.props.mass * Math.abs(this.props.gravity) * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength;

        const forceOfTension: IForce = {
            description: 'Tension',
            magnitude: mag,
            directionInDegrees: angle,
            component: false,
        };

        return [
            {
                description: 'Gravity',
                magnitude: Math.abs(this.props.gravity) * this.props.mass,
                directionInDegrees: 270,
                component: false,
            },
            forceOfTension,
        ];
    };

    // Check for collisions in x direction
    checkForCollisionsWithWall = () => {
        let collision = false;
        const minX = this.state.xPosition;
        const maxX = this.state.xPosition + 2 * this.props.radius;
        if (this.state.xVelocity != 0) {
            this.state.walls.forEach(wall => {
                if (wall.angleInDegrees == 90) {
                    const wallX = (wall.xPos / 100) * this.props.panelWidth();
                    if (wall.xPos < 0.35) {
                        if (minX <= wallX) {
                            this.setState({ xPosition: wallX + 0.01 });
                            if (this.props.elasticCollisions) {
                                this.setState({ xVelocity: -this.state.xVelocity });
                            } else {
                                this.setState({ xVelocity: 0 });
                            }
                            collision = true;
                        }
                    } else {
                        if (maxX >= wallX) {
                            this.setState({ xPosition: wallX - 2 * this.props.radius - 0.01 });
                            if (this.props.elasticCollisions) {
                                this.setState({ xVelocity: -this.state.xVelocity });
                            } else {
                                this.setState({ xVelocity: 0 });
                            }
                            collision = true;
                        }
                    }
                }
            });
        }
        return collision;
    };

    // Check for collisions in y direction
    checkForCollisionsWithGround = () => {
        let collision = false;
        const minY = this.state.yPosition;
        const maxY = this.state.yPosition + 2 * this.props.radius;
        if (this.state.yVelocity > 0) {
            this.state.walls.forEach(wall => {
                if (wall.angleInDegrees == 0 && wall.yPos > 0.4) {
                    const groundY = (wall.yPos / 100) * this.props.panelHeight();
                    if (maxY > groundY) {
                        this.setState({ yPosition: groundY - 2 * this.props.radius - 0.01 });
                        if (this.props.elasticCollisions) {
                            this.setState({ yVelocity: -this.state.yVelocity });
                        } else {
                            this.setState({ yVelocity: 0 });
                            if (this.props.simulationType != 'Two Weights') {
                                const forceOfGravity: IForce = {
                                    description: 'Gravity',
                                    magnitude: Math.abs(this.props.gravity) * this.props.mass,
                                    directionInDegrees: 270,
                                    component: false,
                                };
                                const normalForce: IForce = {
                                    description: 'Normal force',
                                    magnitude: Math.abs(this.props.gravity) * this.props.mass,
                                    directionInDegrees: wall.angleInDegrees + 90,
                                    component: false,
                                };
                                this.props.setForcesUpdated([forceOfGravity, normalForce]);
                                if (this.props.simulationType == 'Inclined Plane') {
                                    const forceOfGravityC: IForce = {
                                        description: 'Gravity',
                                        magnitude: Math.abs(this.props.gravity) * this.props.mass,
                                        directionInDegrees: 270,
                                        component: true,
                                    };
                                    const normalForceC: IForce = {
                                        description: 'Normal force',
                                        magnitude: Math.abs(this.props.gravity) * this.props.mass,
                                        directionInDegrees: wall.angleInDegrees + 90,
                                        component: true,
                                    };
                                    this.props.setComponentForces([forceOfGravityC, normalForceC]);
                                }
                            }
                        }
                        collision = true;
                    }
                }
            });
        }
        if (this.state.yVelocity < 0) {
            this.state.walls.forEach(wall => {
                if (wall.angleInDegrees == 0 && wall.yPos < 0.4) {
                    const groundY = (wall.yPos / 100) * this.props.panelHeight();
                    if (minY < groundY) {
                        this.setState({ yPosition: groundY + 0.01 });
                        if (this.props.elasticCollisions) {
                            this.setState({ yVelocity: -this.state.yVelocity });
                        } else {
                            this.setState({ yVelocity: 0 });
                        }
                        collision = true;
                    }
                }
            });
        }
        return collision;
    };

    // Called at each RK4 step
    evaluate = (currentXPos: number, currentYPos: number, currentXVel: number, currentYVel: number, deltaXPos: number, deltaYPos: number, deltaXVel: number, deltaYVel: number, dt: number) => {
        const newXPos = currentXPos + deltaXPos * dt;
        const newYPos = currentYPos + deltaYPos * dt;
        const newXVel = currentXVel + deltaXVel * dt;
        const newYVel = currentYVel + deltaYVel * dt;
        const newDeltaXPos = newXVel;
        const newDeltaYPos = newYVel;
        let forces = this.props.forcesUpdated();
        if (this.props.simulationType == 'Pendulum') {
            forces = this.getNewPendulumForces(newXPos, newYPos, newXVel, newYVel);
        } else if (this.props.simulationType == 'Spring') {
            forces = this.getNewSpringForces(newYPos);
        } else if (this.props.simulationType == 'Circular Motion') {
            forces = this.getNewCircularMotionForces(newXPos, newYPos);
        }
        const newDeltaXVel = this.getNewAccelerationX(forces);
        const newDeltaYVel = this.getNewAccelerationY(forces);
        return {
            xPos: newXPos,
            yPos: newYPos,
            xVel: newXVel,
            yVel: newYVel,
            deltaXPos: newDeltaXPos,
            deltaYPos: newDeltaYPos,
            deltaXVel: newDeltaXVel,
            deltaYVel: newDeltaYVel,
        };
    };

    // Update position, velocity using RK4 method
    update = () => {
        let startXVel = this.state.xVelocity;
        let startYVel = this.state.yVelocity;
        let xPos = this.state.xPosition;
        let yPos = this.state.yPosition;
        let xVel = this.state.xVelocity;
        let yVel = this.state.yVelocity;
        let forces = this.props.forcesUpdated();
        if (this.props.simulationType == 'Pendulum') {
            forces = this.getNewPendulumForces(xPos, yPos, xVel, yVel);
        } else if (this.props.simulationType == 'Spring') {
            forces = this.getNewSpringForces(yPos);
        } else if (this.props.simulationType == 'Circular Motion') {
            forces = this.getNewCircularMotionForces(xPos, yPos);
        }
        const xAcc = this.getNewAccelerationX(forces);
        const yAcc = this.getNewAccelerationY(forces);
        for (let i = 0; i < this.props.simulationSpeed; i++) {
            const k1 = this.evaluate(xPos, yPos, xVel, yVel, xVel, yVel, xAcc, yAcc, 0);
            const k2 = this.evaluate(xPos, yPos, xVel, yVel, k1.deltaXPos, k1.deltaYPos, k1.deltaXVel, k1.deltaYVel, this.props.timestepSize * 0.5);
            const k3 = this.evaluate(xPos, yPos, xVel, yVel, k2.deltaXPos, k2.deltaYPos, k2.deltaXVel, k2.deltaYVel, this.props.timestepSize * 0.5);
            const k4 = this.evaluate(xPos, yPos, xVel, yVel, k3.deltaXPos, k3.deltaYPos, k3.deltaXVel, k3.deltaYVel, this.props.timestepSize);

            xVel += ((this.props.timestepSize * 1.0) / 6.0) * (k1.deltaXVel + 2 * (k2.deltaXVel + k3.deltaXVel) + k4.deltaXVel);
            yVel += ((this.props.timestepSize * 1.0) / 6.0) * (k1.deltaYVel + 2 * (k2.deltaYVel + k3.deltaYVel) + k4.deltaYVel);
            xPos += ((this.props.timestepSize * 1.0) / 6.0) * (k1.deltaXPos + 2 * (k2.deltaXPos + k3.deltaXPos) + k4.deltaXPos);
            yPos += ((this.props.timestepSize * 1.0) / 6.0) * (k1.deltaYPos + 2 * (k2.deltaYPos + k3.deltaYPos) + k4.deltaYPos);
        }
        // make sure harmonic motion maintained and errors don't propagate
        if (this.props.simulationType == 'Spring') {
            if (startYVel < 0 && yVel > 0 && yPos < this.props.springRestLength) {
                let equilibriumPos = this.props.springRestLength + (this.props.mass * Math.abs(this.props.gravity)) / this.props.springConstant;
                let amplitude = Math.abs(equilibriumPos - this.props.springStartLength);
                yPos = equilibriumPos - amplitude;
            } else if (startYVel > 0 && yVel < 0 && yPos > this.props.springRestLength) {
                let equilibriumPos = this.props.springRestLength + (this.props.mass * Math.abs(this.props.gravity)) / this.props.springConstant;
                let amplitude = Math.abs(equilibriumPos - this.props.springStartLength);
                yPos = equilibriumPos + amplitude;
            }
        }
        if (this.props.simulationType == 'Pendulum') {
            let startX = this.state.updatedStartPosX;
            if (startXVel <= 0 && xVel > 0) {
                xPos = this.state.updatedStartPosX;
                if (this.state.updatedStartPosX > this.props.xMax / 2) {
                    xPos = this.props.xMax / 2 + (this.props.xMax / 2 - startX) - 2 * this.props.radius;
                }
                yPos = this.props.startPosY;
            } else if (startXVel >= 0 && xVel < 0) {
                xPos = this.state.updatedStartPosX;
                if (this.state.updatedStartPosX < this.props.xMax / 2) {
                    xPos = this.props.xMax / 2 + (this.props.xMax / 2 - startX) - 2 * this.props.radius;
                }
                yPos = this.props.startPosY;
            }
        }
        if (this.props.simulationType == 'One Weight') {
            if (yPos < this.state.maxPosYConservation) {
                yPos = this.state.maxPosYConservation;
            }
        }
        this.setState({ xVelocity: xVel });
        this.setState({ yVelocity: yVel });
        this.setState({ xPosition: xPos });
        this.setState({ yPosition: yPos });
        let forcesn = this.props.forcesUpdated();
        if (this.props.simulationType == 'Pendulum') {
            forcesn = this.getNewPendulumForces(xPos, yPos, xVel, yVel);
        } else if (this.props.simulationType == 'Spring') {
            forcesn = this.getNewSpringForces(yPos);
        } else if (this.props.simulationType == 'Circular Motion') {
            forcesn = this.getNewCircularMotionForces(xPos, yPos);
        }
        this.props.setForcesUpdated(forcesn);

        // set component forces if they change
        if (this.props.simulationType == 'Pendulum') {
            let x = this.props.xMax / 2 - xPos - this.props.radius;
            let y = yPos + this.props.radius + 5;
            let angle = (Math.atan(y / x) * 180) / Math.PI;
            if (angle < 0) {
                angle += 180;
            }
            let oppositeAngle = 90 - angle;
            if (oppositeAngle < 0) {
                oppositeAngle = 90 - (180 - angle);
            }

            const pendulumLength = Math.sqrt(x * x + y * y);

            const mag = this.props.mass * Math.abs(this.props.gravity) * Math.cos((oppositeAngle * Math.PI) / 180) + (this.props.mass * (xVel * xVel + yVel * yVel)) / pendulumLength;

            const tensionComponent: IForce = {
                description: 'Tension',
                magnitude: mag,
                directionInDegrees: angle,
                component: true,
            };
            const gravityParallel: IForce = {
                description: 'Gravity Parallel Component',
                magnitude: Math.abs(this.props.gravity) * Math.cos(((90 - angle) * Math.PI) / 180),
                directionInDegrees: 270 - (90 - angle),
                component: true,
            };
            const gravityPerpendicular: IForce = {
                description: 'Gravity Perpendicular Component',
                magnitude: Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180),
                directionInDegrees: -(90 - angle),
                component: true,
            };
            if (Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180) < 0) {
                gravityPerpendicular.magnitude = Math.abs(Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180));
                gravityPerpendicular.directionInDegrees = 180 - (90 - angle);
            }
            this.props.setComponentForces([tensionComponent, gravityParallel, gravityPerpendicular]);
        }
    };

    // Render weight, spring, rod(s), vectors
    render() {
        trace();
        return (
            <div>
                <div
                    className="weightContainer"
                    onPointerDown={e => {
                        if (this.draggable) {
                            this.props.pause();
                            this.setState({ dragging: true });
                            this.setState({ clickPositionX: e.clientX });
                            this.setState({ clickPositionY: e.clientY });
                        }
                    }}
                    onPointerMove={e => {
                        if (this.state.dragging) {
                            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
                            if (newY > this.props.yMax - 2 * this.props.radius - 10) {
                                newY = this.props.yMax - 2 * this.props.radius - 10;
                            } else if (newY < 10) {
                                newY = 10;
                            }

                            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
                            if (newX > this.props.xMax - 2 * this.props.radius - 10) {
                                newX = this.props.xMax - 2 * this.props.radius - 10;
                            } else if (newX < 10) {
                                newX = 10;
                            }
                            if (this.props.simulationType == 'Suspension') {
                                if (newX < (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15) {
                                    newX = (this.props.xMax + this.props.xMin) / 4 - this.props.radius - 15;
                                } else if (newX > (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15) {
                                    newX = (3 * (this.props.xMax + this.props.xMin)) / 4 - this.props.radius / 2 - 15;
                                }
                            }

                            this.setState({ yPosition: newY });
                            this.props.setPosition(undefined, Math.round((this.props.yMax - 2 * this.props.radius - newY + 5) * 100) / 100);
                            if (this.props.simulationType != 'Pulley') {
                                this.setState({ xPosition: newX });
                                this.props.setPosition(newX, undefined);
                            }
                            if (this.props.simulationType != 'Suspension') {
                                if (this.props.simulationType != 'Pulley') {
                                    this.setState({ updatedStartPosX: newX });
                                }
                                this.setState({ updatedStartPosY: newY });
                            }
                            this.setState({ clickPositionX: e.clientX });
                            this.setState({ clickPositionY: e.clientY });
                            this.setDisplayValues();
                        }
                    }}
                    onPointerUp={e => {
                        if (this.state.dragging) {
                            if (this.props.simulationType != 'Pendulum' && this.props.simulationType != 'Suspension') {
                                this.resetEverything();
                            }
                            this.setState({ dragging: false });
                            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
                            if (newY > this.props.yMax - 2 * this.props.radius - 10) {
                                newY = this.props.yMax - 2 * this.props.radius - 10;
                            } else if (newY < 10) {
                                newY = 10;
                            }

                            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
                            if (newX > this.props.xMax - 2 * this.props.radius - 10) {
                                newX = this.props.xMax - 2 * this.props.radius - 10;
                            } else if (newX < 10) {
                                newX = 10;
                            }
                            if (this.props.simulationType == 'Spring') {
                                this.props.setSpringLength(newY);
                            }
                            if (this.props.simulationType == 'Suspension') {
                                let x1rod = (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200;
                                let x2rod = (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius;
                                let deltaX1 = this.state.xPosition + this.props.radius - x1rod;
                                let deltaX2 = x2rod - (this.state.xPosition + this.props.radius);
                                let deltaY = this.state.yPosition + this.props.radius;
                                let dir1T = Math.PI - Math.atan(deltaY / deltaX1);
                                let dir2T = Math.atan(deltaY / deltaX2);
                                let tensionMag2 = (this.props.mass * Math.abs(this.props.gravity)) / ((-Math.cos(dir2T) / Math.cos(dir1T)) * Math.sin(dir1T) + Math.sin(dir2T));
                                let tensionMag1 = (-tensionMag2 * Math.cos(dir2T)) / Math.cos(dir1T);
                                dir1T = (dir1T * 180) / Math.PI;
                                dir2T = (dir2T * 180) / Math.PI;
                                const tensionForce1: IForce = {
                                    description: 'Tension',
                                    magnitude: tensionMag1,
                                    directionInDegrees: dir1T,
                                    component: false,
                                };
                                const tensionForce2: IForce = {
                                    description: 'Tension',
                                    magnitude: tensionMag2,
                                    directionInDegrees: dir2T,
                                    component: false,
                                };
                                const grav: IForce = {
                                    description: 'Gravity',
                                    magnitude: this.props.mass * Math.abs(this.props.gravity),
                                    directionInDegrees: 270,
                                    component: false,
                                };
                                this.props.setForcesUpdated([tensionForce1, tensionForce2, grav]);
                            }
                        }
                    }}>
                    <div className="weight" style={this.weightStyle}>
                        <p className="weightLabel">{this.props.mass} kg</p>
                    </div>
                </div>
                {this.props.simulationType == 'Spring' && (
                    <div
                        className="spring"
                        style={{
                            pointerEvents: 'none',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }}>
                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(val => {
                                const count = 10;
                                let xPos1;
                                let yPos1;
                                let xPos2;
                                let yPos2;
                                if (val % 2 == 0) {
                                    xPos1 = this.state.xPosition + this.props.radius - 20;
                                    xPos2 = this.state.xPosition + this.props.radius + 20;
                                } else {
                                    xPos1 = this.state.xPosition + this.props.radius + 20;
                                    xPos2 = this.state.xPosition + this.props.radius - 20;
                                }
                                yPos1 = (val * this.state.yPosition) / count;
                                yPos2 = ((val + 1) * this.state.yPosition) / count;
                                return <line key={val} x1={xPos1} y1={yPos1} x2={xPos2} y2={yPos2} stroke={'#808080'} strokeWidth="10" />;
                            })}
                        </svg>
                    </div>
                )}

                {this.props.simulationType == 'Pulley' && (
                    <div
                        className="rod"
                        style={{
                            pointerEvents: 'none',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }}>
                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                            <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.state.xPosition + this.props.radius} y2={this.props.yMin} stroke={'#deb887'} strokeWidth="10" />
                        </svg>
                    </div>
                )}
                {this.props.simulationType == 'Pulley' && (
                    <div
                        className="wheel"
                        style={{
                            pointerEvents: 'none',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }}>
                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                            <circle cx={(this.props.xMax + this.props.xMin) / 2} cy={this.props.radius} r={this.props.radius * 1.5} fill={'#808080'} />
                        </svg>
                    </div>
                )}
                {this.props.simulationType == 'Suspension' && (
                    <div
                        className="rod"
                        style={{
                            pointerEvents: 'none',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }}>
                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                            <line
                                x1={this.state.xPosition + this.props.radius}
                                y1={this.state.yPosition + this.props.radius}
                                x2={(this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200}
                                y2={this.props.yMin}
                                stroke={'#deb887'}
                                strokeWidth="10"
                            />
                        </svg>
                        <p
                            style={{
                                position: 'absolute',
                                left: (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200 + 80 + 'px',
                                top: 10 + 'px',
                                backgroundColor: this.labelBackgroundColor,
                            }}>
                            {Math.round(
                                ((Math.atan((this.state.yPosition + this.props.radius) / (this.state.xPosition + this.props.radius - ((this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200))) * 180) / Math.PI) * 100
                            ) / 100}
                            °
                        </p>
                        <div
                            className="rod"
                            style={{
                                pointerEvents: 'none',
                                position: 'absolute',
                                left: 0,
                                top: 0,
                            }}>
                            <svg width={this.props.panelWidth() + 'px'} height={this.props.panelHeight() + 'px'}>
                                <line
                                    x1={this.state.xPosition + this.props.radius}
                                    y1={this.state.yPosition + this.props.radius}
                                    x2={(this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius}
                                    y2={this.props.yMin}
                                    stroke={'#deb887'}
                                    strokeWidth="10"
                                />
                            </svg>
                        </div>

                        <p
                            style={{
                                position: 'absolute',
                                left: (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - 80 + 'px',
                                top: 10 + 'px',
                                backgroundColor: this.labelBackgroundColor,
                            }}>
                            {Math.round(
                                ((Math.atan((this.state.yPosition + this.props.radius) / ((this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - (this.state.xPosition + this.props.radius))) * 180) / Math.PI) * 100
                            ) / 100}
                            °
                        </p>
                    </div>
                )}
                {this.props.simulationType == 'Circular Motion' && (
                    <div
                        className="rod"
                        style={{
                            pointerEvents: 'none',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }}>
                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                            <line
                                x1={this.state.xPosition + this.props.radius}
                                y1={this.state.yPosition + this.props.radius}
                                x2={(this.props.xMin + this.props.xMax) / 2}
                                y2={(this.props.yMin + this.props.yMax) / 2}
                                stroke={'#deb887'}
                                strokeWidth="10"
                            />
                        </svg>
                    </div>
                )}
                {this.props.simulationType == 'Pendulum' && (
                    <div
                        className="rod"
                        style={{
                            pointerEvents: 'none',
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }}>
                        <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                            <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.props.xMax / 2} y2={-5} stroke={'#deb887'} strokeWidth="10" />
                        </svg>
                        {!this.state.dragging && (
                            <div>
                                <p
                                    style={{
                                        position: 'absolute',
                                        zIndex: 5,
                                        left: this.state.xPosition + 'px',
                                        top: this.state.yPosition - 70 + 'px',
                                        backgroundColor: this.labelBackgroundColor,
                                    }}>
                                    {Math.round(this.props.pendulumLength)} m
                                </p>
                                <p
                                    style={{
                                        position: 'absolute',
                                        left: this.props.xMax / 2 + 'px',
                                        top: 30 + 'px',
                                        backgroundColor: this.labelBackgroundColor,
                                    }}>
                                    {Math.round(this.props.pendulumAngle * 100) / 100}°
                                </p>
                            </div>
                        )}
                    </div>
                )}
                {this.props.simulationType == 'Inclined Plane' && (
                    <div>
                        <div style={{ position: 'absolute', left: '0', top: '0' }}>
                            <svg width={this.props.xMax + 'px'} height={this.props.yMax + 'px'}>
                                <polygon points={this.state.coordinates} style={{ fill: 'burlywood' }} />
                            </svg>
                        </div>

                        <p
                            style={{
                                position: 'absolute',
                                left: Math.round(this.props.xMax * 0.5 - 200 + this.props.wedgeWidth - 80) + 'px',
                                top: Math.round(this.props.yMax - 40) + 'px',
                            }}>
                            {Math.round(((Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI) * 100) / 100}°
                        </p>
                    </div>
                )}
                {!this.state.dragging && this.props.showAcceleration && (
                    <div>
                        <div
                            style={{
                                pointerEvents: 'none',
                                position: 'absolute',
                                left: 0,
                                top: 0,
                            }}>
                            <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                                <defs>
                                    <marker id="accArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                        <path d="M0,0 L0,6 L9,3 z" fill="green" />
                                    </marker>
                                </defs>
                                <line
                                    x1={this.state.xPosition + this.props.radius}
                                    y1={this.state.yPosition + this.props.radius}
                                    x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.forcesUpdated()) * 15}
                                    y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.forcesUpdated()) * 15}
                                    stroke={'green'}
                                    strokeWidth="5"
                                    markerEnd="url(#accArrow)"
                                />
                            </svg>
                            <div
                                style={{
                                    pointerEvents: 'none',
                                    position: 'absolute',
                                    left: this.state.xPosition + this.props.radius + this.state.xAccel * 15 + 25 + 'px',
                                    top: this.state.yPosition + this.props.radius + this.state.yAccel * 15 + 70 + 'px',
                                    lineHeight: 1,
                                }}>
                                <p>
                                    {Math.round(100 * Math.sqrt(this.state.xAccel * this.state.xAccel + this.state.yAccel * this.state.yAccel)) / 100} m/s
                                    <sup>2</sup>
                                </p>
                            </div>
                        </div>
                    </div>
                )}
                {!this.state.dragging && this.props.showVelocity && (
                    <div>
                        <div
                            style={{
                                pointerEvents: 'none',
                                position: 'absolute',
                                left: 0,
                                top: 0,
                            }}>
                            <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}>
                                <defs>
                                    <marker id="velArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                        <path d="M0,0 L0,6 L9,3 z" fill="blue" />
                                    </marker>
                                </defs>
                                <line
                                    x1={this.state.xPosition + this.props.radius}
                                    y1={this.state.yPosition + this.props.radius}
                                    x2={this.state.xPosition + this.props.radius + this.state.xVelocity * 7}
                                    y2={this.state.yPosition + this.props.radius + this.state.yVelocity * 7}
                                    stroke={'blue'}
                                    strokeWidth="5"
                                    markerEnd="url(#velArrow)"
                                />
                            </svg>
                            <div
                                style={{
                                    pointerEvents: 'none',
                                    position: 'absolute',
                                    left: this.state.xPosition + this.props.radius + this.state.xVelocity * 7 + 25 + 'px',
                                    top: this.state.yPosition + this.props.radius + this.state.yVelocity * 7 + 'px',
                                    lineHeight: 1,
                                }}>
                                <p>{Math.round(100 * Math.sqrt(this.props.displayXVelocity * this.props.displayXVelocity + this.props.displayYVelocity * this.props.displayYVelocity)) / 100} m/s</p>
                            </div>
                        </div>
                    </div>
                )}
                {!this.state.dragging &&
                    this.props.showComponentForces &&
                    this.props.componentForces().map((force, index) => {
                        if (force.magnitude < this.epsilon) {
                            return;
                        }
                        let arrowStartY: number = this.state.yPosition + this.props.radius;
                        const arrowStartX: number = this.state.xPosition + this.props.radius;
                        let arrowEndY: number = arrowStartY - Math.abs(force.magnitude) * 20 * Math.sin((force.directionInDegrees * Math.PI) / 180);
                        const arrowEndX: number = arrowStartX + Math.abs(force.magnitude) * 20 * Math.cos((force.directionInDegrees * Math.PI) / 180);

                        let color = '#0d0d0d';

                        let labelTop = arrowEndY;
                        let labelLeft = arrowEndX;
                        if (force.directionInDegrees > 90 && force.directionInDegrees < 270) {
                            labelLeft -= 120;
                        } else {
                            labelLeft += 30;
                        }
                        if (force.directionInDegrees >= 0 && force.directionInDegrees < 180) {
                            labelTop += 40;
                        } else {
                            labelTop -= 40;
                        }
                        labelTop = Math.min(labelTop, this.props.yMax + 50);
                        labelTop = Math.max(labelTop, this.props.yMin);
                        labelLeft = Math.min(labelLeft, this.props.xMax - 60);
                        labelLeft = Math.max(labelLeft, this.props.xMin);

                        return (
                            <div key={index}>
                                <div
                                    style={{
                                        pointerEvents: 'none',
                                        position: 'absolute',
                                        left: this.props.xMin,
                                        top: this.props.yMin,
                                    }}>
                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}>
                                        <defs>
                                            <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                                <path d="M0,0 L0,6 L9,3 z" fill={color} />
                                            </marker>
                                        </defs>
                                        {force.component == true && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" strokeDasharray="10,10" markerEnd="url(#forceArrow)" />}
                                        {force.component == false && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />}
                                    </svg>
                                </div>
                                <div
                                    style={{
                                        pointerEvents: 'none',
                                        position: 'absolute',
                                        left: labelLeft + 'px',
                                        top: labelTop + 'px',
                                        lineHeight: 1,
                                        backgroundColor: this.labelBackgroundColor,
                                    }}>
                                    {force.description && <p>{force.description}</p>}
                                    {!force.description && <p>Force</p>}
                                    {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
                                </div>
                            </div>
                        );
                    })}
                {!this.state.dragging &&
                    this.props.showForces &&
                    this.props.forcesUpdated().map((force, index) => {
                        if (force.magnitude < this.epsilon) {
                            return;
                        }
                        let arrowStartY: number = this.state.yPosition + this.props.radius;
                        const arrowStartX: number = this.state.xPosition + this.props.radius;
                        let arrowEndY: number = arrowStartY - Math.abs(force.magnitude) * 20 * Math.sin((force.directionInDegrees * Math.PI) / 180);
                        const arrowEndX: number = arrowStartX + Math.abs(force.magnitude) * 20 * Math.cos((force.directionInDegrees * Math.PI) / 180);

                        let color = '#0d0d0d';

                        let labelTop = arrowEndY;
                        let labelLeft = arrowEndX;
                        if (force.directionInDegrees > 90 && force.directionInDegrees < 270) {
                            labelLeft -= 120;
                        } else {
                            labelLeft += 30;
                        }
                        if (force.directionInDegrees >= 0 && force.directionInDegrees < 180) {
                            labelTop += 40;
                        } else {
                            labelTop -= 40;
                        }
                        labelTop = Math.min(labelTop, this.props.yMax + 50);
                        labelTop = Math.max(labelTop, this.props.yMin);
                        labelLeft = Math.min(labelLeft, this.props.xMax - 60);
                        labelLeft = Math.max(labelLeft, this.props.xMin);

                        return (
                            <div key={index}>
                                <div
                                    style={{
                                        pointerEvents: 'none',
                                        position: 'absolute',
                                        left: this.props.xMin,
                                        top: this.props.yMin,
                                    }}>
                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}>
                                        <defs>
                                            <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                                                <path d="M0,0 L0,6 L9,3 z" fill={color} />
                                            </marker>
                                        </defs>
                                        {force.component == true && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" strokeDasharray="10,10" markerEnd="url(#forceArrow)" />}
                                        {force.component == false && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />}
                                    </svg>
                                </div>
                                <div
                                    style={{
                                        pointerEvents: 'none',
                                        position: 'absolute',
                                        left: labelLeft + 'px',
                                        top: labelTop + 'px',
                                        lineHeight: 1,
                                        backgroundColor: this.labelBackgroundColor,
                                    }}>
                                    {force.description && <p>{force.description}</p>}
                                    {!force.description && <p>Force</p>}
                                    {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
                                </div>
                            </div>
                        );
                    })}
            </div>
        );
    }
}