/* eslint-disable array-callback-return */
/* eslint-disable no-unused-vars */
import * as THREE from "three";
import {
  Canvas,
  useFrame,
  extend,
  useLoader,
  useThree,
  axesHelper,
} from "react-three-fiber";
import { useRef, Suspense, useState, useEffect } from "react";
import {
  OrbitControls,
  Text,
  Html,
  Line,
  Points,
  Point,
  Image,
  Environment,
  useGLTF,
  PerspectiveCamera,
} from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useWebSocket, useFullscreen, useThrottle } from "ahooks";
import { ShrinkOutlined, ArrowsAltOutlined } from "@ant-design/icons";
import { Tooltip, notification } from "antd";
import qs from "query-string";
import Model from "./models/gltf";



const modelconfig = [
  {
    name:"7",
    position:[-18, 0, -22],
    status:1,
    modelname:"M8",
    rotation:[0,1.6,0]
  },
  {
    name:"8",
    position:[-6, 0, -22],
    status:1,
    modelname:"M8",
    rotation:[0,1.6,0]
  },
  {
    name:"9",
    position:[3, 0, -22],
    status:1,
    modelname:"M8",
    rotation:[0,1.6,0]
  }, {
    name:"10",
    position:[12, 0, -22],
    status:1,
    modelname:"M8",
    rotation:[0,1.6,0]
  }, {
    name:"11",
    position:[21, 0, -22],
    status:1,
    modelname:"M8",
    rotation:[0,1.6,0]
  }, {
    name:"12",
    position:[18, 0, -12.5],
    status:1,
    modelname:"T360",
    scale:0.2,
    rotation:[0,1.6,0]

  }, {
    name:"13",
    position:[14, 0, -7],
    status:1,
    modelname:"T360",
    scale:0.2,
    
  }, {
    name:"14",
    position:[18, 0, 6],
    status:1,
    modelname:"M850",
  }, {
    name:"15",
    position:[18, 0, 14],
    status:1,
    modelname:"M8",
  }, {
    name:"16",
    position:[18, 0, 23],
    status:1,
    modelname:"M8",
  }, {
    name:"17",
    position:[9, 0, 24],
    status:1,
    modelname:"M1.4",
  }



]




const Floor = (props) => {
  return (
    <>
      <mesh position={props.position} receiveShadow>
        <boxBufferGeometry args={[52, 0.1, 60]} />
        <meshPhysicalMaterial color={"#12284A"} />
      </mesh>
    </>
  );
};

const Bulb = (props) => {
  return (
    <mesh {...props}>
      <pointLight castShadow></pointLight>
      <ambientLight color={"#999999"}></ambientLight>
      {/* <sphereBufferGeometry args={[0.2, 60, 60]} />
      <meshPhongMaterial emissive={"yellow"} /> */}
    </mesh>
  );
};

function Threedire() {
  return (
    <Canvas
      shadows
      camera={{
        position: [0, 30, 20],
      }}
    >
      {
        modelconfig?.map((it,i)=>{
          return <Model key={it.name} {...it}/>
        })
      }
      <Floor position={[0, -0.06, 0]} positionback={[0, 5, -12.45]} />
      <gridHelper args={[60, 15, "#20293A", "#20293A"]} />
      <Bulb position={[0, 6, 0]} />
      <axesHelper />
      <OrbitControls />
    </Canvas>
  );
}

export default Threedire;