<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
import { Box3, Color, DoubleSide, MeshStandardMaterial, Vector3 } from 'three';
const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color', 'map'])

let scene
if (props.modelUrl) {
    const { scene: model } = await useGLTF(props.modelUrl, { draco: true })
    scene = model
} else {
    scene = props.model
}
scene.receiveShadow = true
scene.castShadow = true

const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
const box = new Box3();
box.expandByObject(scene.children[0]);
let size = new Vector3();
box.getSize(size)

const getMaterial = () => {
    return new MeshStandardMaterial({
        color: new Color(props.color || '#9c9c9c'),
        roughness: 0.2,
        metalness: 0.5,
    })
}
const material = getMaterial()
function shadows_and_pos(scene: any) {
    scene.children.forEach((el: any) => {
        if (el.isMesh) {
            el.castShadow = true
            el.receiveShadow = true
        }
        if (props.removePos) {
            el.translateX(-el.position.x)
            el.translateY(-el.position.y)
            el.translateZ(-el.position.z)
        }
        if (el.material && props.color) el.material = material
        shadows_and_pos(el)
    })
}

shadows_and_pos(scene)

const model = ref()
const { onLoop } = useRenderLoop()
let stepbase = 0.005
const axis = [
    { axis: 'x', func: 'translateX', },
    { axis: 'y', func: 'translateY', },
    { axis: 'z', func: 'translateZ', },
]
type vectorType = 'x' | 'y' | 'z';

onLoop(() => {
    if (model.value && props.target) {
        axis.forEach(element => {
            const point = model.value.position[element.axis]
            let step = stepbase * target[element.axis as vectorType]
            if (step !== 0) {
                if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
                    step = 0
                }
                model.value[element.func](step)
            }
        });
    }
})

watch(props, () => {
    if (props.color && `#${material.color.getHexString()}` !== props.color) {
        function set_material(scene: any) {
            scene.children.forEach((el: any) => {
                if (el.material && props.color) el.material.color = new Color(props.color)
                set_material(el)
            })
        }
        set_material(model.value)
    }
}, { deep: true })

const targetExplosion = useState('targetExplosion')
watch(targetExplosion, () => {
    if (props.refPosition) {
        if (model.value.position.x !== targetExplosion.value[props.refPosition][0]) {
            model.value.position.x = targetExplosion.value[props.refPosition][0]
        }
        if (model.value.position.y !== targetExplosion.value[props.refPosition][1]) {
            model.value.position.y = targetExplosion.value[props.refPosition][1]
        }
        if (model.value.position.z !== targetExplosion.value[props.refPosition][2]) {
            model.value.position.z = targetExplosion.value[props.refPosition][2]
        }
    }
}, { deep: true })
</script>
<template>
    <Suspense>
        <TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
            ref="model">
            <primitive :object="scene.children[0]" />
            <TresMesh v-if="props.map" :cast-shadow="false" :receive-shadow="false">
                <TresPlaneGeometry :args="[size.x, size.y]" />
                <TresMeshPhongMaterial :map="props.map" :transparent="true" :opacity="0.5" :side="DoubleSide" />
            </TresMesh>
        </TresGroup>
    </Suspense>
</template>