<script setup lang="ts">
import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping, Color, DataTexture, RGBAFormat } from 'three';
import { useTexture } from '@tresjs/core'
import { useGLTF } from '@tresjs/cientos'
const section_count = useState('section_count')

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

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

const pbrTexture = await useTexture({
    map: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_Color.jpg',
    // displacementMap: '/texture/Ground039_4K-JPG_Displacement.jpg',
    roughnessMap: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_Roughness.jpg',
    normalMap: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_NormalGL.jpg',
    aoMap: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_AmbientOcclusion.jpg',
    // metalnessMap: '/texture/Ground039_4K-JPG_Color.jpg',
    // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
    // alphaMap: '/textures/myAlphaMapTexture.jpg'
})
const repeat = 5
for (const key in pbrTexture) {
    if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
        const element = pbrTexture[key];
        if (element && element.wrapS) {
            element.wrapS = RepeatWrapping
            element.wrapT = RepeatWrapping
            element.repeat.x = repeat
            element.repeat.y = repeat
            element.flipY = false
        }
    }
}
const { scene: top } = await useGLTF('/models_one/verh_100.glb')
const { scene: fence } = await useGLTF('/models_one/fence.glb')
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')

const { seek, seekAll } = useSeek()
watch(section_count, () => {
    const fences = seekAll(scene.value, 'name', 'fence')
    const base = seek(scene.value, 'name', 'base')
    const n = (section_count.value as number)
    if (fences.length > n) {
        for (let i = fences.length; i > n; i--) {
            const item = fences[i - 1]
            if (item) {
                base?.remove(item)
            }
        }
    }
})

const width = 512;
const height = 512;
const size = width * height;
const data = new Uint8Array(4 * size);
const color = new Color(0xffffff);
const r = Math.floor(color.r * 25);
const g = Math.floor(color.g * 25);
const b = Math.floor(color.b * 255);
for (let i = 0; i < size; i++) {
    const stride = i * 4;
    data[stride] = r;
    data[stride + 1] = g;
    data[stride + 2] = b;
    data[stride + 3] = 255;
}
const texture_one = new DataTexture(data, width, height);
texture_one.needsUpdate = true;

const canvas = document.createElement('canvas')
canvas.width = 512
canvas.height = 512
const ctx = canvas.getContext('2d')
ctx.fillStyle = "red"
ctx.fillRect(10, 10, 512, 512)
console.log(canvas.toDataURL())
const texture = new DataTexture(ctx?.getImageData(0, 0, 512, 512).data.buffer, width, height);
texture.needsUpdate = true;
</script>
<template>
    <TresGroup :translate-y="-3.25" name="base">
        <TresMesh receive-shadow :position-y="-0.5" name="ground">
            <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
            <TresMeshStandardMaterial :map="pbrTexture.map" :normal-map="pbrTexture.normalMap"
                :roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0" />
        </TresMesh>
        <TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground">
            <TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" />
            <TresMeshStandardMaterial color="#eee" />
        </TresMesh>
        <TresMesh receive-shadow name="ground_test" :position-z="-10">
            <TresCircleGeometry :args="[5]" :rotate-x="-Math.PI * 0.5" />
            <TresMeshStandardMaterial :map="texture_one" />
        </TresMesh>
        <TresMesh receive-shadow name="ground_test" :position-z="10">
            <TresCircleGeometry :args="[5]" :rotate-x="-Math.PI * 0.5" />
            <TresMeshStandardMaterial :map="texture" />
        </TresMesh>
        <TresMesh :position="[-9, 0, 2]" cast-shadow receive-shadow>
            <TresBoxGeometry :args="[1, 1, 1]" />
            <TresMeshStandardMaterial :map="texture_one" />
        </TresMesh>
        <template v-for="i in section_count">
            <template v-if="i <= 20">
                <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
            </template>
        </template>
    </TresGroup>
</template>