import { useEffect, useMemo, useRef } from "react";
import * as THREE from "three"

export default function NewSkybox() {  
  const loader = new THREE.TextureLoader();
  const texture = loader.load('/assets/textures/DustTexture.jpg');
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping
  texture.repeat.set( 1.5, 1.5 );
  const meterial = useMemo(() => {
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: texture },
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        varying vec2 vUv;
        uniform sampler2D uTexture;

        void main() {
          vec3 color = texture2D(uTexture, vUv).rgb;
          float gray = dot(color, vec3(0.2126, 0.7152, 0.0722));

          // Set alpha based on the gray value
          float alpha = gray*0.8; // Or use a custom formula, e.g., alpha = 1.0 - gray;

          gl_FragColor = vec4(vec3(color), alpha);
        }
      `,
      transparent: true,
      side: THREE.BackSide, // Make it visible from both sides
    });
  }, [texture]);

  return (
    <>
      <group name="skybox">
        <mesh material={meterial} renderOrder={1} rotation={[0, -Math.PI, Math.PI]} scale={0.95}>
          <boxGeometry args={[3500, 3500, 3500]}/>
        </mesh>
      </group>
    </>
  )
}