// @ts-nocheck
import React, { useEffect, useRef } from 'react'
import Human from './models/Human'

import api, { Transform } from '../store'

type PhantomProps = {
  id: string
}

const Phantom: React.FC<PhantomProps> = ({ id }) => {
  const ref = useRef<THREE.Mesh>(null)
  const currentAnimation = useRef<number>(0)

  useEffect(() => {
    if (ref.current) {
      api.subscribe(
        (state: Transform | null) => {
          if (!state) {
            return
          }
          ref.current?.position.fromArray([
            state.position[0],
            state.position[1],
            state.position[2],
          ])
          ref.current?.quaternion.fromArray([0, state.rotation[1], 0, state.rotation[3]])
          currentAnimation.current = state.a
        },
        (state) => state?.userTransforms?.[id],
      )
    }
  }, [ref.current])

  return (
    <group ref={ref}>
      <Human animation={currentAnimation.current} id={id} />
    </group>
  )
}

export default Phantom
