import "./PhysicsSimulationBox.scss";
import { FieldView, FieldViewProps } from './FieldView';
import React = require('react');
import { ViewBoxAnnotatableComponent } from '../DocComponent';
import { observer } from 'mobx-react';

export interface IForce {
 description: string;
 magnitude: number;
 directionInDegrees: number;
}
export interface IWallProps {
 length: number;
 xPos: number;
 yPos: number;
 angleInDegrees: number;
}
@observer
export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {

 forceOfGravity: IForce = {
  description: "Gravity",
  magnitude: 9.81,
  directionInDegrees: 270,
};

 // Logic for Dash integration
 public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PhysicsSimulationBox, fieldKey); }

 constructor(props: any) {
  super(props);
  this.state = {
   timer: 0,
   weight: true,
   pendulum: false,
   wedge: false,
   startPosX: 0,
   startPosY: 0,
   showVelocity: false,
   showAcceleration: false,
   showForces: false,
   elasticCollisions: false,
   updatedForces: [this.forceOfGravity],
   wallPositions: []
  }
 }

 // Add one weight to the simulation
 addWeight = () => {
  this.setState({weight: true});
  this.setState({wedge: false});
  this.setState({pendulum: false});
 };

// Remove floor and walls from simulation
removeWalls = () => {
 this.setState({wallPositions: []});
};

// Add floor and walls to simulation
addWalls = () => {
  const walls: IWallProps[] = [];
  walls.push({ length: 70, xPos: 0, yPos: 80, angleInDegrees: 0 });
  walls.push({ length: 80, xPos: 0, yPos: 0, angleInDegrees: 90 });
  walls.push({ length: 80, xPos: 69.5, yPos: 0, angleInDegrees: 90 });
  this.setState({wallPositions: walls});
};

 // Timer for animating the simulation
 // setInterval(() => {
 //  const time = this.timer ?? 0
 //  this.setState({timer: time+1});
 // }, 60);

 render () { 
  return (
    <div className = "physicsSimulationContainer">

   </div>
  );
 }
}