<script setup lang="ts">
import {
    PCFSoftShadowMap,
    EquirectangularReflectionMapping,
    CineonToneMapping,
    Euler,
} from 'three';
import { GainMapLoader, } from '@monogrid/gainmap-js'
import { useGLTF, } from '@tresjs/cientos'
import { getColorHexFromRal, type ralTypes } from '../ral';

const pillar_color = use_pillar_color()
const lamelle_color = use_lamelle_color()
const section_count = use_section_count()
const extra_section = use_extra_section()
const max_size = use_max_size()

const { scene, renderer } = useTresContext()
renderer.value.toneMapping = CineonToneMapping
renderer.value.toneMappingExposure = 0.5
// renderer.value.gammaOutput = true

renderer.value.shadowMap.enabled = true
renderer.value.shadowMap.type = PCFSoftShadowMap

const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true })

const top = ref(top_model)
const fence = ref(fence_model)
const fastening = ref(fastening_model)
const lamelle = ref(lamelle_model)

set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
[top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })

const { seek, seekAll } = useSeek()
watch(lamelle_color, () => {
    set_material(lamelle.value, getColorHexFromRal(lamelle_color.value))
    const items = seekAll(scene.value, 'name', "lamelles")
    items.forEach(element => {
        set_material(element, getColorHexFromRal(lamelle_color.value))
    });
})
watch(pillar_color, () => {
    [top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
    const items = [
        ...seekAll(scene.value, 'name', "pillar_one"),
        ...seekAll(scene.value, 'name', "pillar_two"),
        ...seekAll(scene.value, 'name', "lam_fastening_one"),
        ...seekAll(scene.value, 'name', "lam_fastening_two"),
        ...seekAll(scene.value, 'name', "top_section"),
    ]
    items.forEach(element => {
        set_material(element, getColorHexFromRal(pillar_color.value))
    })
})
watch([section_count, extra_section], () => {
    const base = seek(scene.value, 'name', 'base')
    const n = (section_count.value as number) + ~~(!!extra_section.value)
    if (base?.children && n < base?.children.length) {
        base.children = [...base?.children.slice(0, n)]
    }
})

onMounted(async () => {
    const loader = new GainMapLoader(renderer.value)
    const result = await loader.loadAsync([
        'hdrmaps/hdr.webp',
        'hdrmaps/hdr-gainmap.webp',
        'hdrmaps/hdr.json',
    ])
    scene.value.environment = result.renderTarget.texture
    scene.value.background = result.renderTarget.texture
    scene.value.background.mapping = EquirectangularReflectionMapping
    scene.value.backgroundRotation = new Euler(0, 10, 0)
    scene.value.backgroundIntensity = 1.5
    scene.value.backgroundBlurriness = 0.05
    result.renderTarget.texture.dispose();
})

</script>
<template>
    <TresGroup name="base">
        <template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
            <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
        </template>
    </TresGroup>
</template>