import { ContactShadows, Environment } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useEffect } from 'react';
import {
  ACESFilmicToneMapping,
  Color,
  PCFSoftShadowMap,
  SRGBColorSpace
} from 'three';

import { useViewerStore } from '../../store/viewerStore';
import { LOCAL_ENVIRONMENT_HDR } from './localEnvironment';

export interface ViewerEnvironmentProps {
  hdrUrl?: string;
}

export function ViewerEnvironment({
  hdrUrl = import.meta.env.VITE_MECHANICA_HDR_URL ?? LOCAL_ENVIRONMENT_HDR,
}: ViewerEnvironmentProps) {
  const display = useViewerStore((state) => state.display);
  const gl = useThree((state) => state.gl);
  const scene = useThree((state) => state.scene);

  useEffect(() => {
    gl.toneMapping = ACESFilmicToneMapping;
    gl.toneMappingExposure = display.exposure;
    gl.outputColorSpace = SRGBColorSpace;
    gl.shadowMap.enabled = display.shadows;
    gl.shadowMap.type = PCFSoftShadowMap;
    gl.localClippingEnabled = true;
    scene.background = new Color('#0B0E14');
    scene.fog = null;
  }, [display.exposure, display.shadows, gl, scene]);

  return (
    <>
      <color attach="background" args={['#0B0E14']} />

      <ambientLight intensity={0.34} color="#d9e8ff" />

      <hemisphereLight
        args={['#9ec4ff', '#10141c', 0.42]}
        position={[0, 6, 0]}
      />

      <directionalLight
        castShadow={display.shadows}
        color="#ffffff"
        intensity={2.35}
        position={[4.8, 7.2, 5.4]}
        shadow-bias={-0.00018}
        shadow-camera-far={24}
        shadow-camera-left={-7}
        shadow-camera-right={7}
        shadow-camera-top={7}
        shadow-camera-bottom={-7}
        shadow-mapSize={[2048, 2048]}
      />

      <directionalLight
        color="#4c8dff"
        intensity={0.85}
        position={[-4.5, 3.2, -5.2]}
      />

      <pointLight color="#ffb04c" intensity={0.46} position={[0.2, 2.6, 3.4]} />

      {display.environment ? (
        hdrUrl ? (
          <Environment files={hdrUrl} background={false} />
        ) : (
          <Environment files={LOCAL_ENVIRONMENT_HDR} background={false} environmentIntensity={0.72} />
        )
      ) : null}

      {display.grid ? (
        <gridHelper
          args={[14, 28, '#21314a', '#101722']}
          position={[0, -0.42, 0]}
        />
      ) : null}

      {display.shadows ? (
        <ContactShadows
          position={[0, -0.4, 0]}
          opacity={0.44}
          scale={8}
          blur={2.6}
          far={4.6}
          resolution={1024}
          color="#03050a"
        />
      ) : null}
    </>
  );
}