<script setup lang="ts">
import { onMounted, watch } from 'vue';

import { EquirectangularReflectionMapping, ReinhardToneMapping } from 'three';
import { GainMapLoader } from '@monogrid/gainmap-js'
import { useTresContext } from '@tresjs/core';

import hdr_gainmap from '../../assets/promo/hdr/hdr-gainmap.webp'
import hdr_json from '../../assets/promo/hdr/hdr.json?url'
import hdr_webp from '../../assets/promo/hdr/hdr.webp'

const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])

const { renderer, scene } = useTresContext()
const loadEnv = async () => {
    const loader = new GainMapLoader(renderer.value)
    const result = await loader.loadAsync([
        props.hdr_webp || hdr_webp,
        props.hdr_gainmap || hdr_gainmap,
        props.hdr_json || hdr_json,
    ])

    scene.value.environment = result.renderTarget.texture
    // scene.value.background = result.renderTarget.texture
    // scene.value.background.mapping = EquirectangularReflectionMapping
    // scene.value.backgroundBlurriness = 0.15
    result.renderTarget.texture.dispose();
}
renderer.value.toneMapping = ReinhardToneMapping
onMounted(async () => {
    loadEnv()
})
watch(() => props.hdr_webp, loadEnv)
</script>
<template></template>