import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

console.clear();

class BimetallicRing2 extends THREE.Mesh{
  constructor(R, r, h, c1, c2){
    super();
    
    this.u = {
      color1: {value: new THREE.Color(c1)},
      color2: {value: new THREE.Color(c2)},
      h: {value: h}
    }
    let g = new THREE.LatheGeometry(
      [
        [r, -h * 0.5],
        [R, -h * 0.5],
        [R, -h * 0.5],
        [R, h * 0.5],
        [R, h * 0.5],
        [r, h * 0.5],
        [r, h * 0.5],
        [r, -h * 0.5]
      ].map(v => {return new THREE.Vector2(...v)}),
      72
    )
    let m = new THREE.MeshStandardMaterial({
      metalness: 1,
      roughness: 0,
      onBeforeCompile: shader => {
        shader.uniforms.color1 = this.u.color1;
        shader.uniforms.color2 = this.u.color2;
        shader.uniforms.h = this.u.h;
        shader.vertexShader = `
          varying vec3 vPos;
          ${shader.vertexShader}
        `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
            vPos = transformed;
          `
        );
        //console.log(shader.vertexShader);
        shader.fragmentShader = `
          uniform vec3 color1;
          uniform vec3 color2;
          uniform float h;
          varying vec3 vPos;

          ${shader.fragmentShader}
        `.replace(
          `vec4 diffuseColor = vec4( diffuse, opacity );`,
          `
          float u = mod(atan(-vPos.z, vPos.x) + PI2, PI2) / PI2;
          float v = clamp((vPos.y + h * 0.5) / h, 0., 1.);
          
          float s = -sin(v * PI2);
          float uShift = u * 2. + 0.5 - v * 0.04 + s * 0.006;
          float uSeg = mod(floor(uShift), 2.);
          
          vec3 col = mix(color1, color2, uSeg);
          
          vec4 diffuseColor = vec4( col, opacity );
          `
        );
        console.log(shader.fragmentShader);
      }
    });
    m.define = {"USE_UV" : ""}
    
    this.geometry = g;
    this.material = m;
  }
}

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight, 1, 1000);
camera.position.set(3, 5, 8).setLength(15);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const pmremGenerator = new THREE.PMREMGenerator( renderer );
scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

let light = new THREE.DirectionalLight(0xffffff, Math.PI);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, Math.PI * 0.5));

let gu = {
  time: {value: 0}
}

let bimetallicRing = new BimetallicRing2(4, 3.5, 1, 0xff0000, 0x0000ff);
scene.add(bimetallicRing);

let clock = new THREE.Clock();
let t = 0;
let tMin = 1 / 60;

renderer.setAnimationLoop(() => {
  let dt = Math.min(tMin, clock.getDelta());
  t += dt;
  controls.update();
  renderer.render(scene, camera);
});