import React, { Suspense, useEffect, useMemo, useRef ,useState} from 'react'
import { Canvas, useThree } from '@react-three/fiber'
import Scene from './scene'

// 获取 URL 参数 src:完整模型链接 max:最大缩放比 min:最小缩放比
function readParams() {
  const params = new URLSearchParams(window.location.search)
  const src = params.get('src') || ''
  const rawMin = Number(params.get('min'))
  const rawMax = Number(params.get('max'))
  const minZoom = Number.isFinite(rawMin) && rawMin > 0 ? rawMin : 1
  const maxZoom = Number.isFinite(rawMax) && rawMax > 0 ? rawMax : 4
  let zoomMin = Math.min(minZoom, maxZoom)
  const zoomMax = Math.max(minZoom, maxZoom)
  zoomMin = Math.max(1, zoomMin)
  const progressColor = params.get('progressColor')
  return { src, zoomMin, zoomMax, progressColor }
}

export default function App() {
  const { src, zoomMin, zoomMax, progressColor } = useMemo(readParams, [])
  return (
    <div style={{ width: '100vw', height: '100vh'}}>
      <Canvas
        dpr={[1, 2]}
        gl={{ antialias: true }}
        style={{ touchAction: 'none' }}
      >
        <Scene url={src} zoomMin={zoomMin} zoomMax={zoomMax} progressColor={progressColor} />
      </Canvas>
    </div>
  )
}