<Environment>

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import { Environment } from '@threlte/extras'
  import Scene from './Scene.svelte'
  import { Pane, Slider, Checkbox, Folder, List } from 'svelte-tweakpane-ui'

  let isBackground = true
  let path = '/hdr/Bridge2_cube/'
  let files: string | string[] = [
    'posx.jpg',
    'negx.jpg',
    'posy.jpg',
    'negy.jpg',
    'posz.jpg',
    'negz.jpg'
  ]
  let selection = ''

  $: if (selection != '') {
    switch (selection) {
      case 'cube_ldr':
        path = '/hdr/Bridge2_cube/'
        files = ['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']
        break
      case 'cube_hdr':
        path = '/hdr/pisaHDR/'
        files = ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr']
        break
      case 'equirect_ldr':
        path = '/hdr/'
        files = 'equirect_ruined_room.jpg'
        break
      case 'equirect_hdr':
        path = '/hdr/'
        files = 'shanghai_riverside_1k.hdr'
        break
      default:
        console.log(`Sorry, we are out of.`)
    }
  }
  let options = {
    cube_ldr: 'cube_ldr',
    cube_hdr: 'cube_hdr',
    equirect_ldr: 'equirect_ldr',
    equirect_hdr: 'equirect_hdr'
  }
  let useGround = true
  let scale = { x: 100, y: 100, z: 100 }
  let radius = 100
  let height = 5

  $: scaleArray = [scale.x, scale.y, scale.z]
</script>

<Pane
  title="Environment"
  position="fixed"
>
  <Folder title="core">
    <Checkbox
      label="isBackground"
      bind:value={isBackground}
    />
  </Folder>
  <Folder title="Ground Projection">
    <List
      bind:value={selection}
      label="scene"
      {options}
    />
    <Checkbox
      label="use ground environment"
      bind:value={useGround}
    />
    <!-- @TODO: breaks svelte 5 -->
    <!-- <Point
      bind:value={scale}
      label="scale"
    /> -->
    <Slider
      bind:value={radius}
      label="radius"
      min={10}
      max={300}
    />
    <Slider
      bind:value={height}
      label="height"
      min={1}
      max={50}
    />
  </Folder>
</Pane>

<div>
  <Canvas>
    <Environment
      {path}
      {files}
      {isBackground}
      groundProjection={useGround ? { radius, height, scale: scaleArray } : undefined}
    />
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T } from '@threlte/core'
  import { OrbitControls } from '@threlte/extras'
</script>

<T.PerspectiveCamera
  position={[10, 7, 10]}
  fov={60}
  near={1}
  far={20000}
  makeDefault
>
  <OrbitControls
    autoRotate={true}
    autoRotateSpeed={0.4}
    enableZoom={true}
  />
</T.PerspectiveCamera>

<T.Mesh
  castShadow
  receiveShadow
  position.y={2.5}
>
  <T.SphereGeometry args={[2.5]} />
  <T.MeshStandardMaterial
    color="white"
    metalness={0.9}
    roughness={0.05}
    envMapIntensity={0.5}
  />
</T.Mesh>