<script setup lang="ts">
import { useGLTF, } from '@tresjs/cientos'
import Item from './item.vue';
import { getColorHexFromRal } from '../ral';
import { Color, MeshStandardMaterial } from 'three';

const explosion_state = use_explosion_state()

const k = 1.5
const targetExplosion = {
    kosynka: [0 * k, 0 * k, 0.75 * k],
    krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
    osnova_stolba: [0 * k, 0 * k, 0 * k],
    planki: [0 * k, 0 * k, -0.5 * k],
    stolb: [0 * k, 0 * k, 1 * k],
    verh: [0 * k, 0.25 * k, 0 * k],
}

const { scene: kosynka } = await useGLTF('/models/kosynka.glb', { draco: true })
const { scene: krepleniye_planok } = await useGLTF('/models/krepleniye_planok.glb', { draco: true })
const { scene: osnova_stolba } = await useGLTF('/models/osnova_stolba.glb', { draco: true })
const { scene: planki } = await useGLTF('/models/planki.glb', { draco: true })
const { scene: stolb } = await useGLTF('/models/stolb.glb', { draco: true })
const { scene: verh } = await useGLTF('/models/verh.glb', { draco: true })

set_material(planki, 'lamelle');
[stolb, verh, krepleniye_planok].map(el => set_material(el, 'pillar'))
</script>
<template>
    <TresGroup :translate-y="-2" :scale="1.25">
        <Item :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
        <Item :model="krepleniye_planok" :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
        <Item :model="osnova_stolba" />
        <Item :model="planki" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
        <Item :model="stolb" :target="explosion_state ? targetExplosion.stolb : [0, 0, 0]" />
        <Item :model="verh" :target="explosion_state ? targetExplosion.verh : [0, 0, 0]" />
    </TresGroup>
</template>