import Exotic from 'expo-exotic';

class Node extends Exotic.GameObject {
  /* `GameObject`s have an async structure. The main entry point is `async loadAsync()`. */
  async loadAsync() {
    const { gem } = this;
 
    /* Add is async, when invoked with a GameObject, `add()` will call `loadAsync()` and append the child to the `GameObject`s objects:Array<GameObject> */
    await this.add(gem);
    return super.loadAsync(arguments);
  }
 
  /* Breaking out meshes into their own getter allows us to keep clean consise naming, otherwise things can get messy and hard to manage. */
  get gem() {
    /* We use this factory instance to share materials and cut down on memory cost */
    const material = Exotic.Factory.shared.materials.green;
    const mesh = new THREE.Mesh(this.gemGeometry, material);
    return mesh;
  }
 
  get gemGeometry() {
    const geometry = new THREE.CylinderGeometry(0.6, 1, 0.3, 6, 1);
    geometry.vertices[geometry.vertices.length - 1].y = -1;
    geometry.verticesNeedUpdate = true;
    return geometry;
  }
 
  /* When a `GameObject` is the child of the main `GameObject`, it's `update(delta, time)` function is called recursively */
  update(delta: number, time: number) {
    super.update(delta, time);
  }
}
 
export default Gem;

class Node extends Exotic.PhysicsObject {
  /*
                          This is called right after loadAsync.
                          We use this time to setup the physics.
                        */
  loadBody = () => {
    this.body = new CANNON.Body({
      mass: 0.5,
      material: new CANNON.Material(),
    });
    this.body.addShape(new CANNON.Sphere(1));
  };
 
  /*
                          I like to bubble out variables so you can always use the `geometry`, `material`, `mesh` variable names.
                        */
  get ball() {
    const geometry = new THREE.SphereBufferGeometry(1, 20, 10);
 
    /*
                                                  Use a recycled material!
                                                */
    const material = Exotic.Factory.shared.materials.white;
    const mesh = new THREE.Mesh(geometry, material);
    return mesh;
  }
  async loadAsync(scene) {
    this.add(this.ball);
    return super.loadAsync(scene);
  }
}
 
export default Node;

class Game extends Exotic.Game {
  onContextCreate = async props => {
    this.configureRenderer(props);
    const { width, height } = this.props;
    this.scene.size = { width, height };
    /// Standard Camera
    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 10000);
    await this.loadAsync(this.scene);
  };
 
  configureRenderer = ({ gl, width, height, scale }) => {
    const fastDevice = true;
    // renderer
    this.renderer = ExpoTHREE.createRenderer({
      gl,
      precision: fastDevice ? 'highp' : 'mediump',
      antialias: fastDevice ? true : false,
      maxLights: fastDevice ? 4 : 2,
      stencil: false,
    });
    this.renderer.setPixelRatio(scale);
    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0x000000);
  };
 
  loadAsync = async scene => {
    this.level = new PlayingLevel(this);
    await this.level.loadAsync(this.scene);
    this.scene.add(this.level);
    return super.loadAsync(this.scene);
  };
 
  update = (delta, time) => {
    this.renderer.render(this.scene, this.camera);
    super.update(delta, time);
  };
 
  onResize = ({ width, height, scale }) => {
    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();
    this.renderer.setPixelRatio(scale);
    this.renderer.setSize(width, height);
    this.scene.size = { width, height };
  };
}