import React from "react";
import { useState, useEffect, useCallback } from "react";
import "./PhysicsSimulationBox.scss";

export interface IWedgeProps {
  startHeight: number;
  startWidth: number;
  startLeft: number;
}

interface IState {
  angleInRadians: number, 
  left: number,
  coordinates: string,
}

export default class Wedge extends React.Component<IWedgeProps, IState> {

  constructor(props: any) {
    super(props)
    this.state = {
      angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth),
      left: this.props.startLeft,
      coordinates: "",
    }
  }

  color = "#deb887";

  updateCoordinates() {
    const coordinatePair1 =
      Math.round(this.state.left) + "," + Math.round(window.innerHeight * 0.8) + " ";
    const coordinatePair2 =
      Math.round(this.state.left + this.props.startWidth) +
      "," +
      Math.round(window.innerHeight * 0.8) +
      " ";
    const coordinatePair3 =
      Math.round(this.state.left) +
      "," +
      Math.round(window.innerHeight * 0.8 - this.props.startHeight);
    const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
    this.setState({coordinates: coord}); 
  }

  componentDidMount() {
    this.updateCoordinates()
  }

  componentDidUpdate(prevProps: Readonly<IWedgeProps>, prevState: Readonly<IState>, snapshot?: any): void {
    this.updateCoordinates();
    if (prevProps.startHeight != this.props.startHeight || prevProps.startWidth != this.props.startWidth) {
      this.setState({angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth)});
    } 
  }
  
  render() {
    return (
      <div>
        <div style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}>
          <svg
            width={window.innerWidth * 0.7 + "px"}
            height={window.innerHeight * 0.8 + "px"}
          >
            <polygon points={this.state.coordinates} style={{ fill: "burlywood" }} />
          </svg>
        </div>

        <p
          style={{
            position: "absolute",
            zIndex: 500,
            left: Math.round(this.state.left + this.props.startWidth - 80) + "px",
            top: Math.round(window.innerHeight * 0.8 - 40) + "px",
          }}
        >
          {Math.round(((this.state.angleInRadians * 180) / Math.PI) * 100) / 100}°
        </p>
      </div>
    );
  }
};