import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  HemisphericLight,
  Color3,
  Color4,
  Sound,
  Nullable,
  Mesh,
  VertexData,
  SceneLoader,
} from "@babylonjs/core";

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";

import "@babylonjs/loaders";

import {
  Cartesian3,
  Ion,
  createGooglePhotorealistic3DTileset,
  Scene as CesiumScene,
} from "cesium";

import SceneManager from "../SceneManager";

import GameLevel from "../IGameLevel";

// Set up scene
class SurfaceScreen implements GameLevel {
  private engine: Engine;
  private canvas: HTMLCanvasElement;
  private scene: Nullable<Scene>;
  private sceneManager: SceneManager;
  private cesiumScene: CesiumScene;
  private cesiumCamera: any;
  private latitude: any;
  private longitude: any;
  private altitude: any;

  constructor(
    engine: Engine,
    canvas: HTMLCanvasElement,
    sceneManager: SceneManager,
  ) {
    this.engine = engine;
    this.canvas = canvas;
    this.scene = null;
    this.sceneManager = sceneManager;
    this.longitude = -73.935242;
    this.latitude = 40.73061;
    this.altitude = 48;

    Ion.defaultAccessToken =
      "YOUR_API_KEY";

    //Dont actually attach this div to the DOM...
    let container = document.createElement("DIV2");
    let cesiumCanvas = document.createElement("canvas");
    container.appendChild(cesiumCanvas);

    this.cesiumScene = new CesiumScene({
      canvas: cesiumCanvas,
      contextOptions: {
        webgl: {
          alpha: true,
          depth: true,
          stencil: false,
          antialias: true,
          powerPreference: "high-performance",
          failIfMajorPerformanceCaveat: true,
        },
      },
    });
    this.cesiumCamera = this.cesiumScene.camera;
  }

  initialize() {
    console.log("Creating Surface level");
    this.scene = new Scene(this.engine);
    //this.scene.debugLayer.show();

    let camera = new ArcRotateCamera(
      "Camera",
      0,
      0.8,
      14460639.453, //These models are huge....
      Vector3.Zero(),
      this.scene,
    );
    camera.maxZ = 16893714734; //Make far wall very far
    camera.attachControl(this.canvas, true);

    // Function to update the radius (zoom) based on scroll wheel
    function updateWheelPrecision() {
      var radius = camera.radius;
      // Adjust this factor based on how you want the zoom speed to behave
      var factor = 200;
      camera.wheelPrecision = factor / radius;
    }

    // Attach event listeners for zooming
    camera.onViewMatrixChangedObservable.add(updateWheelPrecision);
    updateWheelPrecision(); // Initial call to set the correct wheel precision

    this.scene.clearColor = new Color4(0, 0, 0, 0);

    // Creates a light, aiming 0,1,0 - to the sky
    const light = new HemisphericLight(
      "light",
      new Vector3(0, 1, 0),
      this.scene,
    );
    light.diffuse = Color3.White();
    light.specular = Color3.White();
    light.groundColor = Color3.White();
    light.intensity = 0.5; //Easy

    this.loadCesium();
  }

  convertCesiumMeshToBabylon(cesiumMesh: any) {
    console.log("CONVERT", cesiumMesh.content._model);
    const vertices = [];
    const indices = [];

    // Extract vertex data from Cesium mesh
    const positions =
      cesiumMesh._root._content._content._model._drawCommands[0]._vertexArray
        ._vertexBufferTypedArray;
    const indicesArray =
      cesiumMesh._root._content._content._model._drawCommands[0]._vertexArray
        ._indexBufferTypedArray;

    for (let i = 0; i < positions.length; i += 3) {
      vertices.push(positions[i], positions[i + 1], positions[i + 2]);
    }

    for (let i = 0; i < indicesArray.length; i++) {
      indices.push(indicesArray[i]);
    }

    // Create a new Babylon.js mesh
    const babylonMesh = new Mesh("convertedMesh", this.scene);
    const vertexData = new VertexData();
    vertexData.positions = vertices;
    vertexData.indices = indices;
    vertexData.applyToMesh(babylonMesh);

    return babylonMesh;
  }

  async loadCesium() {
    console.log("LOADING CESIUM");

    //Set location, hopefully pulling in tiles and automatically managing them if we sync with babyoncamera later...
    this.cesiumScene.camera.setView({
      destination: Cartesian3.fromDegrees(
        this.longitude,
        this.latitude,
        this.altitude,
      ),
    });

    try {
      const tileset = await createGooglePhotorealistic3DTileset();
      console.log("tileset", tileset);
      //DONT forget about request content to maybe avoid the render loop...
      tileset.tileVisible.addEventListener((tile) => {
        //console.log("VISILE", tile.content);
      });
      tileset.tileLoad.addEventListener((tile) => {
        const content = tile.content;
        const gltfUrl = content.url;
        console.log(tile);

        console.log("gltf", gltfUrl);
        SceneLoader.ImportMesh("", gltfUrl, "", this.scene, (meshes) => {
          //Hook up visible and such hooks
        });
      });
      tileset.tileUnload.addEventListener((tile) => {
        console.log("UNLOADED", tile);
      });
      tileset.tileFailed.addEventListener((tile) => {
        console.log("FAILED", tile);
      });
      tileset.allTilesLoaded.addEventListener((tile) => {
        console.log("ALL LOADED", tile);
      });
      tileset.initialTilesLoaded.addEventListener((tile) => {
        console.log("INITIAL LOADEDS", tile);
      });
      tileset.loadProgress.addEventListener((tile) => {
        console.log("PROGRESS", tile);
      });
      this.cesiumScene.primitives.add(tileset);
    } catch (error) {
      console.log(`Failed to load tileset: ${error}`);
    }
  }

  // Sync Babylon.js camera with Cesium data
  syncCamera(camera: any) {
    const cesiumCamera = this.cesiumScene.camera;
    const babylonCamera = camera;

    const position = babylonCamera.position;
    const direction = babylonCamera.getDirection(Vector3.Forward());

    const cesiumPosition = new Cartesian3(position.x, position.y, position.z);
    const cesiumDirection = new Cartesian3(
      direction.x,
      direction.y,
      direction.z,
    );

    cesiumCamera.setView({
      destination: cesiumPosition,
      orientation: {
        direction: cesiumDirection,
        up: Cartesian3.UNIT_Z,
      },
    });
  }

  dispose() {
    this.scene?.dispose();
  }

  render() {
    this.cesiumScene.render();
    this.scene?.render();
    //this.syncCamera(this.scene?.activeCamera);
  }
}

export default SurfaceScreen;