import { Object3D } from 'three'
import { defineComponent } from 'vue'
import { useFBX } from '.'
import { useCientos } from '../useCientos'

export const FBXModel = defineComponent({
  name: 'FBXModel',
  props: {
    /*
     * The path to the FBX file.
     */
    path: {
      type: String,
      required: true,
    },
  },
  async setup(props, { expose }) {
    const { state } = useCientos()
    let model: Object3D | null = null

    function getModel() {
      return model
    }
    expose({ getModel })

    model = await useFBX(props.path as string)

    if (state.scene && model.isObject3D) {
      state.scene.add(model)
    }
    return () => {
      model
    }
  },
})
