import React, { useEffect, useRef, useState, useContext } from "react";
import * as BABYLON from '@babylonjs/core';
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import { GridMaterial } from '@babylonjs/materials/';
import { Animatable, HemisphericLight, Mesh, Observable, Vector3 } from "@babylonjs/core";
import {
  GlassAnimation1_1, GlassAnimation1_2D, GlassAnimation1_2U, GlassAnimation1_3, GlassAnimation1_4,
  GlassAnimation2_1, GlassAnimation2_2D, GlassAnimation2_2U, GlassAnimation2_3, GlassAnimation2_4,
  GlassAnimation3_1, GlassAnimation3_2D, GlassAnimation3_2U, GlassAnimation3_3, GlassAnimation3_4,
  GlassAnimation4_1, GlassAnimation4_2D, GlassAnimation4_2U, GlassAnimation4_3, GlassAnimation4_4
} from "./GlassAnimation";
import { useAppSelector } from "../store/hooks";
import { GlassStatus, selectGlassStatus } from "../store/ProductionMonitoringEntity";
import '../page/style/standard.css';
import { MyObservable } from "../context/MyObservable";
import { Button, ButtonGroup } from "@mui/material";
import intl from "react-intl-universal";
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
import EquMap from "./EquMap";

const onMainCamObservable = new Observable();
const onEquObservable = new Observable();



const myStyle = {
  width: '1036px',
  height: '666px',
  outline: 'none',
}



const DetailCamera = {
  Part_1: {
    alpha: BABYLON.Tools.ToRadians(270),
    beta: BABYLON.Tools.ToRadians(25),
    radius: 85,
    target: new BABYLON.Vector3(-110, 0, -8)
  },
  Part_2: {
    alpha: BABYLON.Tools.ToRadians(270),
    beta: BABYLON.Tools.ToRadians(25),
    radius: 85,
    target: new BABYLON.Vector3(-40, 0, -8)
  },
  Part_3: {
    alpha: BABYLON.Tools.ToRadians(270),
    beta: BABYLON.Tools.ToRadians(25),
    radius: 85,
    target: new BABYLON.Vector3(0, 0, -8)
  },
  Part_4: {
    alpha: BABYLON.Tools.ToRadians(270),
    beta: BABYLON.Tools.ToRadians(25),
    radius: 85,
    target: new BABYLON.Vector3(110, 0, -8)
  },
}

function MybabylonJS() {
  const onGlassObservable = useContext(MyObservable);
  const EquStatus = useAppSelector(selectEquStatus);
  const canvasRef = useRef(null);
  onEquObservable.notifyObservers(EquStatus);
  // const thisLineGlassStatus = useAppSelector(selectGlassStatus)
  // onGlassObservable.notifyObservers(thisLineGlassStatus)
  const [SelectedMeshName, setSelectedMeshName] = useState<string | null>(null);




    useEffect(
      () => {
        const canvas = canvasRef.current;
        const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })
  
        const createScene = async function () {
          // This creates a basic Babylon Scene object (non-mesh)
          const scene = new BABYLON.Scene(engine);
          scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
  
          const light = new BABYLON.DirectionalLight('light', new BABYLON.Vector3(20, 20, 100), scene);
          const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(20, 20, 100), scene);
  
          const Glass1_1 = new BABYLON.TransformNode('Glass1_1')
  
          const baseLight = new HemisphericLight('hemiLight', new Vector3(-1, 1, 0), scene);
          baseLight.intensity = 1;
          baseLight.diffuse = new BABYLON.Color3(1, 1, 1);
          baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25);
          baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5);
  
          //add an arcRotateCamera to the scene
          const camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(245), BABYLON.Tools.ToRadians(25), 215, new BABYLON.Vector3(-2, 0, -8));
          camera.lowerRadiusLimit = 10;
          camera.upperRadiusLimit = 600;
  
          // This attaches the camera to the canvas
          camera.attachControl(canvas, true);
  
          //创建一个材质
          const newMt = new BABYLON.StandardMaterial("newMt");
          newMt.diffuseColor = BABYLON.Color3.Blue();
  
  
          const ground = BABYLON.MeshBuilder.CreateGround('ground', {
            width: 1000,
            height: 1000,
            subdivisions: 1
          }, scene);
  
  
          ground.scaling.x = 100;
          ground.scaling.z = ground.scaling.x;
          ground.isPickable = false;
  
          let grid = new GridMaterial("grid", scene);
  
          grid.majorUnitFrequency = 10
          grid.minorUnitVisibility = .3
          grid.gridRatio = .04
          grid.backFaceCulling = !1
          grid.mainColor = new BABYLON.Color3(1, 1, 1)
          grid.lineColor = new BABYLON.Color3(1, 1, 1)
          grid.opacity = .8
          grid.zOffset = 1
          grid.opacityTexture = new BABYLON.Texture("/public/png/backgroundGround.png", scene)
          ground.material = grid;
  
  
          let hl = new BABYLON.HighlightLayer('hl1', scene);
          let hl2 = new BABYLON.HighlightLayer('hl2', scene);
  
  
  
          const LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1.babylon', scene);
          const LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1_middle.babylon', scene);
          const LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1_far.babylon', scene)
  

  
  
  
          LOD2MESH.meshes.map((mesh) => {
            mesh.isPickable = true;
          })
          LOD1MESH.meshes.map((mesh) => {
  
            mesh.isPickable = true;
          })
          LOD0MESH.meshes.map((mesh) => {
            mesh.isPickable = true;
            mesh.actionManager = new BABYLON.ActionManager(scene);
            LOD1MESH.meshes.find((lowMesh) => {
              if (mesh.name === lowMesh.name) {
                // @ts-ignore
                mesh.addLODLevel(30, lowMesh);
              }
            })
            LOD2MESH.meshes.find((low2Mesh) => {
  
              if (mesh.name === low2Mesh.name) {
                // @ts-ignore
                mesh.addLODLevel(100, low2Mesh);
              }
            })
  
            //鼠标移动到物体上亮显
            mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, () => {
              // @ts-ignore
              hl.addMesh(mesh, BABYLON.Color3.Green());
              // @ts-ignore
              hl.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Green());
              // @ts-ignore
              hl.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Green());
            }));
            mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, () => {
              // @ts-ignore
              hl.removeMesh(mesh)
              // @ts-ignore
              hl.removeMesh(mesh.getLODLevelAtDistance(30));
              // @ts-ignore
              hl.removeMesh(mesh.getLODLevelAtDistance(100));
            }));
  
            // mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
            //   () => {
            //     hl.addMesh(mesh, BABYLON.Color3.Green());
            //   }
            // ));
            mesh._scene.onPointerDown = async (event, _pickResult) => {
              const pickInfo = mesh._scene.pick(mesh._scene.pointerX, mesh._scene.pointerY)
  
              const clickedPosition = _pickResult.pickedPoint
              //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
              // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
  
              //判断是否是右键
              if (!(event.buttons === 1 && pickInfo.pickedMesh)) return
  
              setSelectedMeshName(pickInfo.pickedMesh.name)
  
              console.log('模型：', { SelectedMeshName }, '位置：', clickedPosition)
            }
  
  
          })
  
  
  
  
  
          /////////////////////////////////////////////////////////////////////////////////////////////////
          onEquObservable.add((eventData, eventState) => {
            LOD0MESH.meshes.find((mesh) => {
              // @ts-ignore
              hl2.removeMesh(mesh);
              // @ts-ignore
              hl2.removeMesh(mesh.getLODLevelAtDistance(30));
              // @ts-ignore
              hl2.removeMesh(mesh.getLODLevelAtDistance(100));
            })
            Object.keys(eventData as EquStatusInterface).map((key) => {
              // @ts-ignore
              if (eventData[key] == 2) {
                // @ts-ignore
                EquMap[key].map((name) => {
                  LOD0MESH.meshes.find((mesh) => {
                    if (mesh.name == name) {
                      // @ts-ignore
                      hl2.addMesh(mesh, BABYLON.Color3.Red());
                      // @ts-ignore
                      hl2.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Red());
                      // @ts-ignore
                      hl2.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Red());
                    }
                  })
                })
              }
            })
          })
  
  
          /////////////////////////////////////////////////////////////////////////////////////////////////
  
          function reset() {
            camera.target = new BABYLON.Vector3(-2, 0, -8);
            camera.alpha = BABYLON.Tools.ToRadians(245);
            camera.beta = BABYLON.Tools.ToRadians(25);
            camera.radius = 215;
          }
  
          let resetCamera = setTimeout(reset, 15000)
          scene.onPointerObservable.add((pointerInfo) => {
            // console.log(camera.target, camera.alpha * 180 / 3.14, camera.beta * 180 / 3.14, camera.radius)
            switch (pointerInfo.type) {
              case BABYLON.PointerEventTypes.POINTERMOVE:
                clearTimeout(resetCamera);
                resetCamera = setTimeout(reset, 15000)
            }
          })
  
          onMainCamObservable.add((eventData, eventState) => {
            clearTimeout(resetCamera);
            resetCamera = setTimeout(reset, 5000);
            switch (eventData) {
              case 1:
                camera.target = DetailCamera.Part_1.target;
                camera.alpha = DetailCamera.Part_1.alpha;
                camera.beta = DetailCamera.Part_1.beta;
                camera.radius = DetailCamera.Part_1.radius;
                break;
              case 2:
                camera.target = DetailCamera.Part_2.target;
                camera.alpha = DetailCamera.Part_2.alpha;
                camera.beta = DetailCamera.Part_2.beta;
                camera.radius = DetailCamera.Part_2.radius;
                break;
              case 3:
                camera.target = DetailCamera.Part_3.target;
                camera.alpha = DetailCamera.Part_3.alpha;
                camera.beta = DetailCamera.Part_3.beta;
                camera.radius = DetailCamera.Part_3.radius;
                break;
              case 4:
                camera.target = DetailCamera.Part_4.target;
                camera.alpha = DetailCamera.Part_4.alpha;
                camera.beta = DetailCamera.Part_4.beta;
                camera.radius = DetailCamera.Part_4.radius;
                break;
            }
          })
  
          return scene;
        };
  
        // call the createScene function
        const scene = createScene();
  
        scene.then((scene) => {
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line1_1
          let Line1_1: NodeJS.Timer;
          let AnimationList1_1 = new Set<Animatable>()
  
          function Begin1_1() {
            clearInterval(Line1_1);
            AnimationList1_1.forEach((item) => {
              item.restart()
            })
            Line1_1 = setInterval(() => {
              const { glass1_1_1, glass1_1_2, } = GlassAnimation1_1(scene);
              let Anima1_1_1: Animatable, Anima1_1_2: Animatable;
  
              Anima1_1_1 = scene.beginAnimation(glass1_1_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_1_1);
                glass1_1_1.dispose();
                AnimationList1_1.delete(Anima1_1_1)
              })
              Anima1_1_2 = scene.beginAnimation(glass1_1_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_1_2);
                glass1_1_2.dispose();
                AnimationList1_1.delete(Anima1_1_2)
              })
              AnimationList1_1.add(Anima1_1_1).add(Anima1_1_2)
            }, 2500)
          }
  
          function Stop1_1() {
            clearInterval(Line1_1)
            AnimationList1_1.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove1_1() {
            clearInterval(Line1_1)
            AnimationList1_1.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line1_2U
          let Line1_2U: NodeJS.Timer;
          let AnimationList1_2U = new Set<Animatable>()
  
          function Begin1_2U() {
            clearInterval(Line1_2U);
            AnimationList1_2U.forEach((item) => {
              item.restart()
            })
            Line1_2U = setInterval(() => {
              const { glass1_2_1 } = GlassAnimation1_2U(scene);
              let Anima1_2U: Animatable;
  
              Anima1_2U = scene.beginAnimation(glass1_2_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_2_1);
                glass1_2_1.dispose();
                AnimationList1_2U.delete(Anima1_2U)
              })
  
              AnimationList1_2U.add(Anima1_2U)
            }, 2500)
          }
  
          function Stop1_2U() {
            clearInterval(Line1_2U)
            AnimationList1_2U.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove1_2U() {
            clearInterval(Line1_2U)
            AnimationList1_2U.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line1_2D
          let Line1_2D: NodeJS.Timer;
          let AnimationList1_2D = new Set<Animatable>()
  
          function Begin1_2D() {
            clearInterval(Line1_2D);
            AnimationList1_2D.forEach((item) => {
              item.restart()
            })
            Line1_2D = setInterval(() => {
              const { glass1_2_2 } = GlassAnimation1_2D(scene);
              let Anima1_2D: Animatable;
  
              Anima1_2D = scene.beginAnimation(glass1_2_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_2_2);
                glass1_2_2.dispose();
                AnimationList1_2D.delete(Anima1_2D)
              })
  
              AnimationList1_2D.add(Anima1_2D)
            }, 2500)
          }
  
          function Stop1_2D() {
            clearInterval(Line1_2D)
            AnimationList1_2D.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove1_2D() {
            clearInterval(Line1_2D)
            AnimationList1_2D.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line1_3
          let Line1_3: NodeJS.Timer;
          let AnimationList1_3 = new Set<Animatable>()
  
          function Begin1_3() {
            clearInterval(Line1_3);
            AnimationList1_3.forEach((item) => {
              item.restart()
            })
            Line1_3 = setInterval(() => {
              const { glass1_3_1, glass1_3_2 } = GlassAnimation1_3(scene);
              let Anima1_3_1: Animatable, Anima1_3_2: Animatable;
  
              Anima1_3_1 = scene.beginAnimation(glass1_3_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_3_1);
                glass1_3_1.dispose();
                AnimationList1_3.delete(Anima1_3_1)
              })
              Anima1_3_2 = scene.beginAnimation(glass1_3_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_3_2);
                glass1_3_2.dispose();
                AnimationList1_3.delete(Anima1_3_2)
              })
              AnimationList1_3.add(Anima1_3_1).add(Anima1_3_2)
            }, 2500)
          }
  
          function Stop1_3() {
            clearInterval(Line1_3)
            AnimationList1_3.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove1_3() {
            clearInterval(Line1_3)
            AnimationList1_3.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line1_4
          let Line1_4: NodeJS.Timer;
          let AnimationList1_4 = new Set<Animatable>()
  
          function Begin1_4() {
            clearInterval(Line1_4);
            AnimationList1_4.forEach((item) => {
              item.restart()
            })
            Line1_4 = setInterval(() => {
              const { glass1_4_1, glass1_4_2 } = GlassAnimation1_4(scene);
              let Anima1_4_1: Animatable, Anima1_4_2: Animatable;
  
              Anima1_4_1 = scene.beginAnimation(glass1_4_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_4_1);
                glass1_4_1.dispose();
                AnimationList1_4.delete(Anima1_4_1)
              })
              Anima1_4_2 = scene.beginAnimation(glass1_4_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass1_4_2);
                glass1_4_2.dispose();
                AnimationList1_4.delete(Anima1_4_2)
              })
              AnimationList1_4.add(Anima1_4_1).add(Anima1_4_2)
            }, 2500)
          }
  
          function Stop1_4() {
            clearInterval(Line1_4)
            AnimationList1_4.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove1_4() {
            clearInterval(Line1_4)
            AnimationList1_4.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line2_1
          let Line2_1: NodeJS.Timer;
          let AnimationList2_1 = new Set<Animatable>()
  
          function Begin2_1() {
            clearInterval(Line2_1);
            AnimationList2_1.forEach((item) => {
              item.restart()
            })
            Line2_1 = setInterval(() => {
              const { glass2_1_1, glass2_1_2 } = GlassAnimation2_1(scene);
              let Anima2_1_1: Animatable, Anima2_1_2: Animatable;
  
              Anima2_1_1 = scene.beginAnimation(glass2_1_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_1_1);
                glass2_1_1.dispose();
                AnimationList2_1.delete(Anima2_1_1)
              })
              Anima2_1_2 = scene.beginAnimation(glass2_1_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_1_2);
                glass2_1_2.dispose();
                AnimationList2_1.delete(Anima2_1_2)
              })
              AnimationList2_1.add(Anima2_1_1).add(Anima2_1_2)
            }, 2500)
          }
  
          function Stop2_1() {
            clearInterval(Line2_1)
            AnimationList2_1.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove2_1() {
            clearInterval(Line2_1)
            AnimationList2_1.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line2_2U
          let Line2_2U: NodeJS.Timer;
          let AnimationList2_2U = new Set<Animatable>()
  
          function Begin2_2U() {
            clearInterval(Line2_2U);
            AnimationList2_2U.forEach((item) => {
              item.restart()
            })
            Line2_2U = setInterval(() => {
              const { glass2_2_1 } = GlassAnimation2_2U(scene);
              let Anima2_2U: Animatable;
  
              Anima2_2U = scene.beginAnimation(glass2_2_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_2_1);
                glass2_2_1.dispose();
                AnimationList2_2U.delete(Anima2_2U)
              })
  
              AnimationList2_2U.add(Anima2_2U)
            }, 2500)
          }
  
          function Stop2_2U() {
            clearInterval(Line2_2U)
            AnimationList2_2U.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove2_2U() {
            clearInterval(Line2_2U)
            AnimationList2_2U.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line2_2D
          let Line2_2D: NodeJS.Timer;
          let AnimationList2_2D = new Set<Animatable>()
  
          function Begin2_2D() {
            clearInterval(Line2_2D);
            AnimationList2_2D.forEach((item) => {
              item.restart()
            })
            Line2_2D = setInterval(() => {
              const { glass2_2_2 } = GlassAnimation2_2D(scene);
              let Anima2_2D: Animatable;
  
              Anima2_2D = scene.beginAnimation(glass2_2_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_2_2);
                glass2_2_2.dispose();
                AnimationList2_2D.delete(Anima2_2D)
              })
  
              AnimationList2_2D.add(Anima2_2D)
            }, 2500)
          }
  
          function Stop2_2D() {
            clearInterval(Line2_2D)
            AnimationList2_2D.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove2_2D() {
            clearInterval(Line2_2D)
            AnimationList2_2D.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line2_3
          let Line2_3: NodeJS.Timer;
          let AnimationList2_3 = new Set<Animatable>()
  
          function Begin2_3() {
            clearInterval(Line2_3);
            AnimationList2_3.forEach((item) => {
              item.restart()
            })
            Line2_3 = setInterval(() => {
              const { glass2_3_1, glass2_3_2 } = GlassAnimation2_3(scene);
              let Anima2_3_1: Animatable, Anima2_3_2: Animatable;
  
              Anima2_3_1 = scene.beginAnimation(glass2_3_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_3_1);
                glass2_3_1.dispose();
                AnimationList2_3.delete(Anima2_3_1)
              })
              Anima2_3_2 = scene.beginAnimation(glass2_3_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_3_2);
                glass2_3_2.dispose();
                AnimationList2_3.delete(Anima2_3_2)
              })
              AnimationList2_3.add(Anima2_3_1).add(Anima2_3_2)
            }, 2500)
          }
  
          function Stop2_3() {
            clearInterval(Line2_3)
            AnimationList2_3.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove2_3() {
            clearInterval(Line2_3)
            AnimationList2_3.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line2_4
          let Line2_4: NodeJS.Timer;
          let AnimationList2_4 = new Set<Animatable>()
  
          function Begin2_4() {
            clearInterval(Line2_4);
            AnimationList2_4.forEach((item) => {
              item.restart()
            })
            Line2_4 = setInterval(() => {
              const { glass2_4_1, glass2_4_2 } = GlassAnimation2_4(scene);
              let Anima2_4_1: Animatable, Anima2_4_2: Animatable;
  
              Anima2_4_1 = scene.beginAnimation(glass2_4_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_4_1);
                glass2_4_1.dispose();
                AnimationList2_4.delete(Anima2_4_1)
              })
              Anima2_4_2 = scene.beginAnimation(glass2_4_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass2_4_2);
                glass2_4_2.dispose();
                AnimationList2_4.delete(Anima2_4_2)
              })
              AnimationList2_4.add(Anima2_4_1).add(Anima2_4_2)
            }, 2500)
          }
  
          function Stop2_4() {
            clearInterval(Line2_4)
            AnimationList2_4.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove2_4() {
            clearInterval(Line2_4)
            AnimationList2_4.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line3_1
          let Line3_1: NodeJS.Timer;
          let AnimationList3_1 = new Set<Animatable>()
  
          function Begin3_1() {
            clearInterval(Line3_1);
            AnimationList3_1.forEach((item) => {
              item.restart()
            })
            Line3_1 = setInterval(() => {
              const { glass3_1_1, glass3_1_2 } = GlassAnimation3_1(scene);
              let Anima3_1_1: Animatable, Anima3_1_2: Animatable;
  
              Anima3_1_1 = scene.beginAnimation(glass3_1_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_1_1);
                glass3_1_1.dispose();
                AnimationList3_1.delete(Anima3_1_1)
              })
              Anima3_1_2 = scene.beginAnimation(glass3_1_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_1_2);
                glass3_1_2.dispose();
                AnimationList3_1.delete(Anima3_1_2)
              })
              AnimationList3_1.add(Anima3_1_1).add(Anima3_1_2)
            }, 2500)
          }
  
          function Stop3_1() {
            clearInterval(Line3_1)
            AnimationList3_1.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove3_1() {
            clearInterval(Line3_1)
            AnimationList3_1.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line3_2U
          let Line3_2U: NodeJS.Timer;
          let AnimationList3_2U = new Set<Animatable>()
  
          function Begin3_2U() {
            clearInterval(Line3_2U);
            AnimationList3_2U.forEach((item) => {
              item.restart()
            })
            Line3_2U = setInterval(() => {
              const { glass3_2_2 } = GlassAnimation3_2U(scene);
              let Anima3_2U: Animatable;
  
              Anima3_2U = scene.beginAnimation(glass3_2_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_2_2);
                glass3_2_2.dispose();
                AnimationList3_2U.delete(Anima3_2U)
              })
  
              AnimationList3_2U.add(Anima3_2U)
            }, 2500)
          }
  
          function Stop3_2U() {
            clearInterval(Line3_2U)
            AnimationList3_2U.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove3_2U() {
            clearInterval(Line3_2U)
            AnimationList3_2U.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line3_2D
          let Line3_2D: NodeJS.Timer;
          let AnimationList3_2D = new Set<Animatable>()
  
          function Begin3_2D() {
            clearInterval(Line3_2D);
            AnimationList3_2D.forEach((item) => {
              item.restart()
            })
            Line3_2D = setInterval(() => {
              const { glass3_2_1 } = GlassAnimation3_2D(scene);
              let Anima3_2D: Animatable;
  
              Anima3_2D = scene.beginAnimation(glass3_2_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_2_1);
                glass3_2_1.dispose();
                AnimationList3_2D.delete(Anima3_2D)
              })
  
              AnimationList3_2D.add(Anima3_2D)
            }, 2500)
          }
  
          function Stop3_2D() {
            clearInterval(Line3_2D)
            AnimationList3_2D.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove3_2D() {
            clearInterval(Line3_2D)
            AnimationList3_2D.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line3_3
          let Line3_3: NodeJS.Timer;
          let AnimationList3_3 = new Set<Animatable>()
  
          function Begin3_3() {
            clearInterval(Line3_3);
            AnimationList3_3.forEach((item) => {
              item.restart()
            })
            Line3_3 = setInterval(() => {
              const { glass3_3_1, glass3_3_2 } = GlassAnimation3_3(scene);
              let Anima3_3_1: Animatable, Anima3_3_2: Animatable;
  
              Anima3_3_1 = scene.beginAnimation(glass3_3_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_3_1);
                glass3_3_1.dispose();
                AnimationList3_3.delete(Anima3_3_1)
              })
              Anima3_3_2 = scene.beginAnimation(glass3_3_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_3_2);
                glass3_3_2.dispose();
                AnimationList3_3.delete(Anima3_3_2)
              })
              AnimationList3_3.add(Anima3_3_1).add(Anima3_3_2)
            }, 2500)
          }
  
          function Stop3_3() {
            clearInterval(Line3_3)
            AnimationList3_3.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove3_3() {
            clearInterval(Line3_3)
            AnimationList3_3.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line3_4
          let Line3_4: NodeJS.Timer;
          let AnimationList3_4 = new Set<Animatable>()
  
          function Begin3_4() {
            clearInterval(Line3_4);
            AnimationList3_4.forEach((item) => {
              item.restart()
            })
            Line3_4 = setInterval(() => {
              const { glass3_4_1, glass3_4_2 } = GlassAnimation3_4(scene);
              let Anima3_4_1: Animatable, Anima3_4_2: Animatable;
  
              Anima3_4_1 = scene.beginAnimation(glass3_4_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_4_1);
                glass3_4_1.dispose();
                AnimationList3_4.delete(Anima3_4_1)
              })
              Anima3_4_2 = scene.beginAnimation(glass3_4_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass3_4_2);
                glass3_4_2.dispose();
                AnimationList3_4.delete(Anima3_4_2)
              })
              AnimationList3_4.add(Anima3_4_1).add(Anima3_4_2)
            }, 2500)
          }
  
          function Stop3_4() {
            clearInterval(Line3_4)
            AnimationList3_4.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove3_4() {
            clearInterval(Line3_4)
            AnimationList3_4.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line4_1
          let Line4_1: NodeJS.Timer;
          let AnimationList4_1 = new Set<Animatable>()
  
          function Begin4_1() {
            clearInterval(Line4_1);
            AnimationList4_1.forEach((item) => {
              item.restart()
            })
            Line4_1 = setInterval(() => {
              const { glass4_1_1, glass4_1_2 } = GlassAnimation4_1(scene);
              let Anima4_1_1: Animatable, Anima4_1_2: Animatable;
  
              Anima4_1_1 = scene.beginAnimation(glass4_1_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_1_1);
                glass4_1_1.dispose();
                AnimationList4_1.delete(Anima4_1_1)
              })
              Anima4_1_2 = scene.beginAnimation(glass4_1_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_1_2);
                glass4_1_2.dispose();
                AnimationList4_1.delete(Anima4_1_2)
              })
              AnimationList4_1.add(Anima4_1_1).add(Anima4_1_2)
            }, 2500)
          }
  
          function Stop4_1() {
            clearInterval(Line4_1)
            AnimationList4_1.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove4_1() {
            clearInterval(Line4_1)
            AnimationList4_1.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line4_2U
          let Line4_2U: NodeJS.Timer;
          let AnimationList4_2U = new Set<Animatable>()
  
          function Begin4_2U() {
            clearInterval(Line4_2U);
            AnimationList4_2U.forEach((item) => {
              item.restart()
            })
            Line4_2U = setInterval(() => {
              const { glass4_2_2 } = GlassAnimation4_2U(scene);
              let Anima4_2U: Animatable;
  
              Anima4_2U = scene.beginAnimation(glass4_2_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_2_2);
                glass4_2_2.dispose();
                AnimationList4_2U.delete(Anima4_2U)
              })
  
              AnimationList4_2U.add(Anima4_2U)
            }, 2500)
          }
  
          function Stop4_2U() {
            clearInterval(Line4_2U)
            AnimationList4_2U.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove4_2U() {
            clearInterval(Line4_2U)
            AnimationList4_2U.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line4_2D
          let Line4_2D: NodeJS.Timer;
          let AnimationList4_2D = new Set<Animatable>()
  
          function Begin4_2D() {
            clearInterval(Line4_2D);
            AnimationList4_2D.forEach((item) => {
              item.restart()
            })
            Line4_2D = setInterval(() => {
              const { glass4_2_1 } = GlassAnimation4_2D(scene);
              let Anima4_2D: Animatable;
  
              Anima4_2D = scene.beginAnimation(glass4_2_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_2_1);
                glass4_2_1.dispose();
                AnimationList4_2D.delete(Anima4_2D)
              })
  
              AnimationList4_2D.add(Anima4_2D)
            }, 2500)
          }
  
          function Stop4_2D() {
            clearInterval(Line4_2D)
            AnimationList4_2D.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove4_2D() {
            clearInterval(Line4_2D)
            AnimationList4_2D.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line4_3
          let Line4_3: NodeJS.Timer;
          let AnimationList4_3 = new Set<Animatable>()
  
          function Begin4_3() {
            clearInterval(Line4_3);
            AnimationList4_3.forEach((item) => {
              item.restart()
            })
            Line4_3 = setInterval(() => {
              const { glass4_3_1, glass4_3_2 } = GlassAnimation4_3(scene);
              let Anima4_3_1: Animatable, Anima4_3_2: Animatable;
  
              Anima4_3_1 = scene.beginAnimation(glass4_3_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_3_1);
                glass4_3_1.dispose();
                AnimationList4_3.delete(Anima4_3_1)
              })
              Anima4_3_2 = scene.beginAnimation(glass4_3_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_3_2);
                glass4_3_2.dispose();
                AnimationList4_3.delete(Anima4_3_2)
              })
              AnimationList4_3.add(Anima4_3_1).add(Anima4_3_2)
            }, 2500)
          }
  
          function Stop4_3() {
            clearInterval(Line4_3)
            AnimationList4_3.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove4_3() {
            clearInterval(Line4_3)
            AnimationList4_3.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          //Line4_4
          let Line4_4: NodeJS.Timer;
          let AnimationList4_4 = new Set<Animatable>()
  
          function Begin4_4() {
            clearInterval(Line4_4);
            AnimationList4_4.forEach((item) => {
              item.restart()
            })
            Line4_4 = setInterval(() => {
              const { glass4_4_1, glass4_4_2 } = GlassAnimation4_4(scene);
              let Anima4_4_1: Animatable, Anima4_4_2: Animatable;
  
              Anima4_4_1 = scene.beginAnimation(glass4_4_1, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_4_1);
                glass4_4_1.dispose();
                AnimationList4_4.delete(Anima4_4_1)
              })
              Anima4_4_2 = scene.beginAnimation(glass4_4_2, 0, 1000, false, 1, () => {
                scene.stopAnimation(glass4_4_2);
                glass4_4_2.dispose();
                AnimationList4_4.delete(Anima4_4_2)
              })
              AnimationList4_4.add(Anima4_4_1).add(Anima4_4_2)
            }, 2500)
          }
  
          function Stop4_4() {
            clearInterval(Line4_4)
            AnimationList4_4.forEach((item) => {
              item.pause()
            })
          }
  
          function Remove4_4() {
            clearInterval(Line4_4)
            AnimationList4_4.forEach((item) => {
              item.stop()
            })
          }
  
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          onGlassObservable.add((eventData, eventState) => {
            console.log('all')
            const ThisGlassStatus = eventData as GlassStatus;
            switch (ThisGlassStatus.LINE_1_1) {
              case 0:
                Stop1_1();
                break;
              case 1:
                Begin1_1();
                break;
              case 2:
                Remove1_1()
                break;
            }
            switch (ThisGlassStatus.LINE_1_2U) {
              case 0:
                Stop1_2U();
                break;
              case 1:
                Begin1_2U();
                break;
              case 2:
                Remove1_2U()
                break;
            }
            switch (ThisGlassStatus.LINE_1_2D) {
              case 0:
                Stop1_2D();
                break;
              case 1:
                Begin1_2D();
                break;
              case 2:
                Remove1_2D()
                break;
            }
            switch (ThisGlassStatus.LINE_1_3) {
              case 0:
                Stop1_3();
                break;
              case 1:
                Begin1_3();
                break;
              case 2:
                Remove1_3()
                break;
            }
            switch (ThisGlassStatus.LINE_1_4) {
              case 0:
                Stop1_4();
                break;
              case 1:
                Begin1_4();
                break;
              case 2:
                Remove1_4();
                break;
            }
            switch (ThisGlassStatus.LINE_2_1) {
              case 0:
                Stop2_1();
                break;
              case 1:
                Begin2_1();
                break;
              case 2:
                Remove2_1();
                break;
            }
            switch (ThisGlassStatus.LINE_2_2U) {
              case 0:
                Stop2_2U();
                break;
              case 1:
                Begin2_2U();
                break;
              case 2:
                Remove2_2U();
                break;
            }
            switch (ThisGlassStatus.LINE_2_2D) {
              case 0:
                Stop2_2D();
                break;
              case 1:
                Begin2_2D();
                break;
              case 2:
                Remove2_2D();
                break;
            }
            switch (ThisGlassStatus.LINE_2_3) {
              case 0:
                Stop2_3();
                break;
              case 1:
                Begin2_3();
                break;
              case 2:
                Remove2_3();
                break;
            }
            switch (ThisGlassStatus.LINE_2_4) {
              case 0:
                Stop2_4();
                break;
              case 1:
                Begin2_4();
                break;
              case 2:
                Remove2_4();
                break;
            }
            switch (ThisGlassStatus.LINE_3_1) {
              case 0:
                Stop3_1();
                break;
              case 1:
                Begin3_1();
                break;
              case 2:
                Remove3_1();
                break;
            }
            switch (ThisGlassStatus.LINE_3_2U) {
              case 0:
                Stop3_2U();
                break;
              case 1:
                Begin3_2U();
                break;
              case 2:
                Remove3_2U();
                break;
            }
            switch (ThisGlassStatus.LINE_3_2D) {
              case 0:
                Stop3_2D();
                break;
              case 1:
                Begin3_2D();
                break;
              case 2:
                Remove3_2D();
                break;
            }
            switch (ThisGlassStatus.LINE_3_3) {
              case 0:
                Stop3_3();
                break;
              case 1:
                Begin3_3();
                break;
              case 2:
                Remove3_3();
                break;
            }
            switch (ThisGlassStatus.LINE_3_4) {
              case 0:
                Stop3_4();
                break;
              case 1:
                Begin3_4();
                break;
              case 2:
                Remove3_4();
                break;
            }
            switch (ThisGlassStatus.LINE_4_1) {
              case 0:
                Stop4_1();
                break;
              case 1:
                Begin4_1();
                break;
              case 2:
                Remove4_1();
                break;
            }
            switch (ThisGlassStatus.LINE_4_2U) {
              case 0:
                Stop4_2U();
                break;
              case 1:
                Begin4_2U();
                break;
              case 2:
                Remove4_2U();
                break;
            }
            switch (ThisGlassStatus.LINE_4_2D) {
              case 0:
                Stop4_2D();
                break;
              case 1:
                Begin4_2D();
                break;
              case 2:
                Remove4_2D();
                break;
            }
            switch (ThisGlassStatus.LINE_4_3) {
              case 0:
                Stop4_3();
                break;
              case 1:
                Begin4_3();
                break;
              case 2:
                Remove4_3();
                break;
            }
            switch (ThisGlassStatus.LINE_4_4) {
              case 0:
                Stop4_4();
                break;
              case 1:
                Begin4_4();
                break;
              case 2:
                Remove4_4();
                break;
            }
          })
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        })
  
        // run the render loop
        scene.then((scene) => {
          engine.runRenderLoop(function () {
            scene.render()
          });
        },
          (reason) => {
            console.log(reason);
          }
        );
  
        // Resize
        window.addEventListener("resize", function () {
          engine.resize();
        });
      },
      []
    );
 

  const handleClick1 = () => {
    onMainCamObservable.notifyObservers(1)
  }
  const handleClick2 = () => {
    onMainCamObservable.notifyObservers(2)
  }
  const handleClick3 = () => {
    onMainCamObservable.notifyObservers(3)
  }
  const handleClick4 = () => {
    onMainCamObservable.notifyObservers(4)
  }


  return (
    <div style={myStyle}>
     
      <ButtonGroup variant="contained" aria-label="outlined button group" className={'btnArea'}>
        <h2>当前选择: {SelectedMeshName}</h2>
        <Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick1}>{intl.get('Part1')}</Button>
        <Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick2}>{intl.get('Part2')}</Button>
        <Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick3}>{intl.get('Part3')}</Button>
        <Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick4}>{intl.get('Part4')}</Button>
      </ButtonGroup>
      <canvas ref={canvasRef} style={myStyle} />
    </div>
  );
}

export default MybabylonJS;