/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-03 11:31:00
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-24 14:27:24
 * @FilePath: /editor-plus/src/pages/components/GlftBlock/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { Gltf, OrbitControls, Stage } from "@react-three/drei";
import { Canvas, useThree } from "@react-three/fiber";
import { useTimeout } from "ahooks";
import { useEffect, useMemo, useRef, useState } from "react";
import "./index.less";

function Sphere({ position, CoordinatePoint, CurGongjianPoint }) {
  const meshRef = useRef();
  const { camera } = useThree();

  useEffect(() => {
    setTimeout(() => {
      camera.lookAt(0, 0, 0); // 设置相机指向原点
    }, 200);
  }, [camera]);

  return (
    <mesh
      ref={meshRef}
      scale={100}
      position={
        position
          ? Object.values(position)?.map((it, i) => {
              return it;
            })
          : []
      }
    >
      <sphereGeometry attach="geometry" args={[0.1, 32, 32]} />
      <meshPhysicalMaterial attach="material" color="red" />
    </mesh>
  );
}

const Model = ({ url, rotation, scale }) => {
  const [position, setPosition] = useState([0, 0, 0]);

  const rotations = useMemo(() => {
    return rotation.map((it, i) => {
      return i === 1
        ? (it * (Math.PI / 180))
        : it * (Math.PI / 180);
    });
  }, [rotation]);

  return (
    <Gltf
      src={url}
      receiveShadow
      castShadow
      position={position}
      rotation={rotations}
      scale={scale * 1000}
      inject={
        <meshPhysicalMaterial
          color="white"
          metalness={1} // 控制金属感，1 表示完全金属
          roughness={0} // 控制光滑度，0 表示非常光滑
        />
      }
    />
  );
};

function PointViewer({
  position,
  CoordinatePoint,
  CurGongjianPoint,
  CurGongjianData,
}) {
  const [url, seturl] = useState(null);
  useTimeout(() => {
    seturl(`./glb/${CurGongjianData.ModelPath}.glb`);
  }, 100);

  return (
    <div className="bar-block-component">
      {CurGongjianPoint && (
        <Canvas
          shadows
          dpr={[1, 1.5]}
          camera={{ position: [8, 8, 16] }}
          gl={{ antialias: true }}
          style={{ height: "100%", width: "100%" }}
          id={"rrt"}
        >
          <color attach="background" args={["#333"]} />
          <Stage
            intensity={0.5}
            preset="rembrandt"
            shadows={"contact"}
            adjustCamera={1}
            environment={{
              path: "/",
              files: "env.hdr",
            }}
          >
            <OrbitControls target={[0, 0, 0]}></OrbitControls>
            <axesHelper args={[400]} position={[0, 0, 0]}></axesHelper>
            {url && (
              <Model
                url={url}
                rotation={CurGongjianData?.LocalRotation}
                scale={
                  CurGongjianData.ScalingRatio
                    ? parseInt(CurGongjianData.ScalingRatio)
                    : 1
                }
              ></Model>
            )}
            <Sphere
              position={position}
              CoordinatePoint={CoordinatePoint}
              CurGongjianPoint={CurGongjianPoint}
            ></Sphere>
          </Stage>
        </Canvas>
      )}
    </div>
  );
}

export default PointViewer;