<script setup lang="ts">
import { Vector3 } from 'three'

const types = {
  bench: defineAsyncComponent(() => import('./bench.vue')),
  table: defineAsyncComponent(() => import('./bench-table.vue'))
}

const props = defineProps({
  type: {
    type: String as PropType<keyof typeof types>,
    default: 'bench',
    required: true
  }
})

const controlsState = reactive({
  // minDistance: 2,
  // maxDistance: 10,
  enablePan: false,
  enableZoom: false,
  maxPolarAngle: Math.PI / 2 - 0.2
})

const toggleModal = () => {}
</script>

<template>
  <div>
    <div class="relative h-[600px] max-h-screen">
      <ClientOnly fallback-tag="div">
        <template #fallback>
          <div class="fallback">Загрузка 3D модели</div>
        </template>
        <TresCanvas height="600">
          <TresPerspectiveCamera />
          <OrbitControls v-bind="controlsState" make-default />
          <ModelEnv />
          <Suspense>
            <component :is="types[props.type]" />
          </Suspense>
        </TresCanvas>
      </ClientOnly>
    </div>
    <button @click.prevent="toggleModal">Рассчитать</button>
  </div>
</template>
