<script setup lang="ts">
import { Environment } from '@tresjs/cientos'
import { ReinhardToneMapping, PCFShadowMap } from 'three';

const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section')
const pillar_color = useState('pillar_color')
const lamelle_color = useState('lamelle_color')

const lSize = 0.115
const bSize = 0.0235
const pillar_size = 80 * 0.001

const { renderer } = useTresContext()
renderer.value.toneMapping = ReinhardToneMapping

renderer.value.shadowMap.enabled = true
renderer.value.shadowMap.type = PCFShadowMap
</script>
<template>
    <TresGroup>
        <Suspense>
            <Environment files='public/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
        </Suspense>
        <Suspense>
            <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
                <TresMesh receive-shadow>
                    <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
                </TresMesh>
                <ModelItem model-url="/models_one/bottom.glb"
                    :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
                    :color="pillar_color" />
                <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
                    :remove-pos="true" :color="pillar_color" />
                <ModelItem model-url="/models_one/verh_100.glb"
                    :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
                    :color="pillar_color" />
                <ModelItem model-url="/models_one/verh_100.glb"
                    :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
                    :color="pillar_color" />
                <template v-for="(n, i) in lamelles_count">
                    <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
                        <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
                    </TresGroup>
                </template>
                <template v-for="(n, i) in lamelles_count">
                    <TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
                        <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
                    </TresGroup>
                </template>
                <template v-for="(n, i) in lamelles_count">
                    <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
                        <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
                    </TresGroup>
                </template>
                <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
                    <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
                </TresGroup>
            </TresGroup>
        </Suspense>
    </TresGroup>
</template>