import { ContactShadows, Environment, PresentationControls, SoftShadows, useHelper } from "@react-three/drei";
import { Suspense, useRef } from 'react'
import * as THREE from 'three'
import FluxModel from "./FluxModel";

<SoftShadows
    frustum={3.75}
    size={0.005}
    near={9.5}
    samples={17}
    rings={11}
/>

export default function Flux()
{


    const directionalLightRef = useRef()
    const camera = useRef()
    useHelper(camera, THREE.CameraHelper)
    useHelper(directionalLightRef, THREE.DirectionalLightHelper)

    
    return <>
        <Environment  preset="warehouse" blur={ .5 }/>

        <directionalLight
            // ref={ directionalLightRef }
            position={ [ 4, 10, -5 ] }
            intensity={ 1.5 }
            castShadow
            shadow-mapSize={ [ 2048, 2048 ] }
            shadow-camera-near={ 6 }
            shadow-camera-far={ 15 }
            shadow-camera-top={ 5 }
            shadow-camera-right={ 5 }
            shadow-camera-bottom={ -5 }
            shadow-camera-left={ -5 }
            shadow-normalBias={ 0.01 }
        >
            {/* <PerspectiveCamera ref={camera} attach='shadow-camera' /> */}
        </directionalLight>
        <ambientLight intensity={ 0.5 } />
        <Suspense>
            <PresentationControls
                global
                rotation={ [ 0.13, 0.15, 0.1 ] }
                polar={ [ - 0.75, 0.75 ] }
                azimuth={ [ - 1.75, 1.5 ] }
                // config={ { mass: 2, tension: 400 } }
                // snap={ { mass: 4, tension: 400 } }
            >
                <FluxModel scale={ 0.8 } position-y={ 1 } />
            </PresentationControls>
            <ContactShadows
                position-y={ -2.5 }
                opacity={ 0.6 }
                scale={ 10 }
                blur={ 2.4 }    
            />
        </Suspense>
    </>
}