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

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

type GLTFResult = GLTF & {
  nodes: {
    pCone: THREE.Mesh
  }
  materials: {
    AdditiveFracture: THREE.MeshStandardMaterial
  }
}

export function PCone(props: JSX.IntrinsicElements['group']) {
  const { nodes, materials } = useGLTF('/assets/models/pCone.glb') as GLTFResult

  const loader = new THREE.TextureLoader();

  const DarkMatterMaterial = useMemo(() => {
    const DarkMatter = loader.load('/sourceimages/DarkMatter.png');
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: DarkMatter },
      },
      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 * 5.2; // Or use a custom formula, e.g., alpha = 1.0 - gray;

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

  const DarkMatterMaterial2 = useMemo(() => {
    const DarkMatter2 = loader.load('/sourceimages/DarkMatter2.png');
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: DarkMatter2 },
      },
      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);
        }
      `,
      transparent: true,
      side: THREE.FrontSide, // Make it visible from both sides
    });
  }, []);
//   materials.AdditiveFracture
  return (
    <group {...props} dispose={null}>
      <mesh renderOrder={6} geometry={nodes.pCone.geometry} position={[0, 0, -9]} material={DarkMatterMaterial}/>
      <mesh renderOrder={5} geometry={nodes.pCone.geometry} material={DarkMatterMaterial2} position={[0, 0, -11]} rotation={[0.2, -0.3, 0]} scale={[2, 2, 1]}/>
      <group position={[4, 5, -5]} rotation={[0.9, -0.3, 0]}>
        <mesh renderOrder={2} geometry={nodes.pCone.geometry} material={DarkMatterMaterial} rotation={[0, 0, Math.PI/2]} scale={[3, 3, 1.5]}/>
      </group>
      <group position={[-1, 7, 5]} rotation={[2.0, 0, 0]}>
        <mesh renderOrder={4} geometry={nodes.pCone.geometry} material={DarkMatterMaterial2} rotation={[0, 0, 1.1]} scale={[2, 2, 1.5]}/>
      </group>
      <group position={[-1, 8, 7]} rotation={[2.4, 0, 0]}>
        <mesh renderOrder={3} geometry={nodes.pCone.geometry} material={DarkMatterMaterial} rotation={[0, 0, -1.1]} scale={[2, 2, 2]}/>
      </group>
      
    </group>
  )
}

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