/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from 'three'
import React, { useMemo } from 'react'
import { useGLTF } from '@react-three/drei'
import { GLTF } from 'three-stdlib'

type GLTFResult = GLTF & {
  nodes: {
    nebula6: THREE.Mesh
    nebula12: THREE.Mesh
    nebula18: THREE.Mesh
    nebula19: THREE.Mesh
    nebula20: THREE.Mesh
    nebula23: THREE.Mesh
    nebula27: THREE.Mesh
    nebula30: THREE.Mesh
    nebula32: THREE.Mesh
    nebula3: THREE.Mesh
    nebula9: THREE.Mesh
    nebula24: THREE.Mesh
    nebula22: THREE.Mesh
    nebula21: THREE.Mesh
    nebula10: THREE.Mesh
    nebula1: THREE.Mesh
    nebula35: THREE.Mesh
  }
  materials: {}
}

export function Gas(props: JSX.IntrinsicElements['group']) {
  
  const { nodes } = useGLTF('/assets/models/Gas.glb') as GLTFResult
  const loader = new THREE.TextureLoader();

  const GasMaterial1 = useMemo(() => {
    const gas1 = loader.load('/sourceimages/Middle_Nebula.png');
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: gas1 },
      },
      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*20.0), alpha);
          // gl_FragColor = vec4(vec3(color), 1.0);
        }
      `,
      transparent: true,      
      side: THREE.DoubleSide, // Make it visible from both sides
    });
  }, []);

  const GasMaterial2 = useMemo(() => {
    const gas2 = loader.load('/sourceimages/Nebula-006-Dark-01-GlitteryBlue.png');
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: gas2 },
      },
      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 ; // Or use a custom formula, e.g., alpha = 1.0 - gray;

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

  const GasMaterial3 = useMemo(() => {
    const gas3 = loader.load('/sourceimages/Nebula-007-Medium-06-DarkMatterPurple.png');
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: gas3 },
      },
      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 =  4.0 * gray ; // Or use a custom formula, e.g., alpha = 1.0 - gray;

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

  return (
    <group {...props} dispose={null}>
      <mesh renderOrder={10} geometry={nodes.nebula6.geometry} material={GasMaterial3} position={[-0.04, -0.03, -0.02]} rotation={[-0.01, 0.27, 0.16]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula12.geometry} material={GasMaterial2} position={[-0.13, -0.02, 0.02]} rotation={[-0.34, -0.86, -0.18]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula18.geometry} material={GasMaterial3} position={[-0.06, -0.01, 0.01]} rotation={[-1.28, 0.79, 0.09]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula19.geometry} material={GasMaterial2} position={[-0.13, -0.05, -0.01]} rotation={[1.24, 0.78, -2.47]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula20.geometry} material={GasMaterial2} position={[-0.06, 0, 0.04]} rotation={[-3.09, 0.85, 0.6]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula23.geometry} material={GasMaterial3} position={[-0.13, -0.07, -0.02]} rotation={[3.13, 0.61, 2.44]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula27.geometry} material={GasMaterial2} position={[-0.03, -0.03, 0.01]} rotation={[2.25, -0.42, -2.25]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula30.geometry} material={GasMaterial3} position={[0.01, 0.08, 0.02]} rotation={[-2.85, -0.51, -1.48]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula32.geometry} material={GasMaterial1} position={[-0.08, 0.1, -0.01]} rotation={[-1.48, -0.28, 0.04]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula3.geometry} material={GasMaterial2} position={[0.09, -0.01, 0.02]} rotation={[0.12, -1.28, 1.33]} scale={0.02} />
      <mesh renderOrder={10} geometry={nodes.nebula9.geometry} material={GasMaterial1} position={[-0.01, -0.04, -0.04]} rotation={[-0.14, -0.83, -1.64]} scale={0.01} />
      <mesh renderOrder={10} geometry={nodes.nebula24.geometry} material={GasMaterial2} position={[-0.08, 0.03, -0.08]} rotation={[0.17, 0.85, 1.1]} scale={0.02} />
      <mesh renderOrder={10} geometry={nodes.nebula22.geometry} material={GasMaterial3} position={[0.11, -0.05, 0.18]} rotation={[1.33, 0.74, -1.69]} scale={0.02} />
      <mesh renderOrder={10} geometry={nodes.nebula21.geometry} material={GasMaterial1} position={[-0.06, 0.12, -0.11]} rotation={[-2.52, -0.11, -0.18]} scale={0.02} />
      <mesh renderOrder={10} geometry={nodes.nebula10.geometry} material={GasMaterial2} position={[-0.05, 0.19, -0.05]} rotation={[-2.22, 0.27, 1.55]} scale={0.02} />
      <mesh renderOrder={10} geometry={nodes.nebula1.geometry} material={GasMaterial1} position={[-0.02, 0.06, 0.11]} rotation={[-1.29, 0.17, 1.05]} scale={0.02} />
      <mesh renderOrder={10} geometry={nodes.nebula35.geometry} material={GasMaterial3} position={[-0.02, -0.03, 0.01]} rotation={[-0.05, -0.38, -1.16]} scale={0.01} />
    </group>
  )
}

useGLTF.preload('/assets/models/Gas.glb')
