import "./style.css";

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(0, 0, 14);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setClearColor(0x252025);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new OrbitControls(camera, renderer.domElement);

var geom = new THREE.SphereBufferGeometry(5, 180, 90);
// var colors = [];
// var color = new THREE.Color();
// var q = ["white"];
// // for (let i = 0; i < geom.attributes.position.count; i++) {
// //   color.set(q[THREE.Math.randInt(0, q.length - 1)]);
// //   color.toArray(colors, i * 3);
// // }
// // geom.setAttribute(
// //   "color",
// //   new THREE.BufferAttribute(new Float32Array(colors), 3)
// // );

var loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
var texture = loader.load(
  "https://cywarr.github.io/small-shop/earthspec1k[1].jpg"
);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load(
  "https://threejs.org/examples/textures/sprites/circle.png"
);

var points = new THREE.Points(
  geom,
  new THREE.ShaderMaterial({
    vertexColors: THREE.VertexColors,
    uniforms: {
      visibility: {
        value: texture,
      },
      shift: {
        value: 0,
      },
      shape: {
        value: disk,
      },
      size: {
        value: 0.2,
      },
      scale: {
        value: window.innerHeight / 2,
      },
    },
    vertexShader: `
      uniform float scale;
      uniform float size;
      varying vec2 vUv;
      varying vec3 vColor;
      
      void main() {
        vUv = uv;
        vColor = color;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / length( mvPosition.xyz )) * (0.3 + sin(uv.y * 3.1415926) * 0.6 );
        gl_Position = projectionMatrix * mvPosition;
      }
    `,
    fragmentShader: `
      uniform sampler2D visibility;
      uniform float shift;
      uniform sampler2D shape;
      varying vec2 vUv;
      varying vec3 vColor;
      
      void main() {
        vec2 uv = vUv;
        uv.x += shift;
        vec4 v = texture2D(visibility, uv);
        if (length(v.rgb) > 1.0) discard;
        gl_FragColor = vec4(vColor, 1.0);
        vec4 shapeData = texture2D(shape, gl_PointCoord);
        if (shapeData.a < 0.0625) discard;
        gl_FragColor = gl_FragColor * shapeData;
      }
    `,
    transparent: false,
  })
);
scene.add(points);

var blackGlobe = new THREE.Mesh(
  geom,
  new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: true,
    opacity: 0,
  })
);
blackGlobe.scale.setScalar(0.99);
points.add(blackGlobe);

// Raycaster and mouse vector
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var isHovering = false;

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // Update raycaster
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects([blackGlobe]);
  console.log(intersects);
  // Check if the mouse is hovering over the mesh
  isHovering = intersects.length > 0;
}

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  points.material.uniforms.shift.value = -time * 0.1;
  renderer.render(scene, camera);
}


"remove shader rotation"