/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Author: sirsaugsage (https://sketchfab.com/sirsausage)
License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
Source: https://sketchfab.com/3d-models/fantasy-game-inn-192bf30a7e28425ab385aef19769d4b0
Title: Fantasy Game Inn
*/

import { useGLTF } from '@react-three/drei'
import { RigidBody } from '@react-three/rapier'
import { useRef } from 'react'
// import { useGame } from '#/lib/ecctrl/src/Ecctrl' // 'ecctrl'
import { 
  useGame, 
  // type AnimationSet 
} from '#/lib/ecctrl/src/stores/useGame'

export default function Map(props: any) {
  const circleRef = useRef(null)
  const date = useRef(0)
  const { nodes, materials } = useGLTF('./assets/examples/fantasy_game_inn.glb')

  const setMoveToPoint = useGame((state) => state.setMoveToPoint)

  return (
    <>
      <mesh ref={circleRef} rotation-x={-Math.PI / 2}>
        <ringGeometry args={[0.2, 0.3]} />
        <meshBasicMaterial color={0x000000} transparent opacity={0.25} />
      </mesh>

      <RigidBody type="fixed" colliders="trimesh" ccd>
        <group {...props} dispose={null}>
          <group rotation={[-Math.PI / 2, 0, 0]} scale={0.11}>
            <mesh
              castShadow
              receiveShadow
              // @ts-expect-error
              geometry={nodes.TheInn_bakeInn_0.geometry}
              onPointerMove={({ point }) => {
                circleRef.current.position.z = point.z
                circleRef.current.position.x = point.x
                circleRef.current.position.y = point.y + 0.01
              }}
              onPointerDown={() => {
                date.current = Date.now()
              }}
              onPointerUp={({ point }) => {
                if (Date.now() - date.current < 200) {
                  // a quick click
                  setMoveToPoint(point)
                }
              }}>
              <meshStandardMaterial 
                // @ts-expect-error
                map={materials.bakeInn.map} 
              />
            </mesh>
          </group>
        </group>
      </RigidBody>
    </>
  )
}

useGLTF.preload('./assets/examples/fantasy_game_inn.glb')