import { animate, createTimer, utils } from 'animejs';
import * as THREE from 'three';
import 'animejs/adapters/three';

// Three.js setup

const [ $container ] = utils.$('.full-container');
const { width, height } = $container.getBoundingClientRect();

const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
$container.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 100);
camera.position.set(0, 0, 8);
scene.add(camera);

scene.add(new THREE.AmbientLight(0xffffff, 0.15));
const dirLight = new THREE.DirectionalLight(0xffffff, 5);
dirLight.position.set(3, 2, 3);
const lightRig = new THREE.Group().add(dirLight);
scene.add(lightRig);

// Three spheres sharing a single geometry
const sphereGeometry = new THREE.SphereGeometry(0.8, 64, 64);

// Sphere 1: built-in MeshStandardMaterial
const standard = new THREE.Mesh(sphereGeometry, new THREE.MeshStandardMaterial());
standard.position.set(-2.5, -0.25, 0);
scene.add(standard);

// Vertex wave deformation along the normal, with an optional rim light
function applyWave(material, { rim = false } = {}) {
  material.uniforms = {
    uTime: { value: 0 },
    uAmplitude: { value: 0.04 },
    uFrequency: { value: new THREE.Vector3(3, 3, 3) },
  };
  if (rim) material.uniforms.uRim = { value: 0 };
  material.onBeforeCompile = shader => {
    Object.assign(shader.uniforms, material.uniforms);
    shader.vertexShader = `
      uniform float uTime;
      uniform float uAmplitude;
      uniform vec3 uFrequency;
    ` + shader.vertexShader.replace('#include <begin_vertex>', `
      #include <begin_vertex>
      float w = sin(uTime + position.x * uFrequency.x)
             + sin(uTime + position.y * uFrequency.y)
             + sin(uTime + position.z * uFrequency.z);
      transformed += normal * w * uAmplitude;
    `);
    if (rim) {
      shader.fragmentShader = `
        uniform float uRim;
      ` + shader.fragmentShader.replace('#include <dithering_fragment>', `
        #include <dithering_fragment>
        gl_FragColor.rgb += pow(1.0 - max(vNormal.z, 0.0), 3.0) * uRim;
      `);
    }
  };
  return material;
}

// Sphere 2: MeshStandardMaterial with the wave vertex hook
const waveMaterial = applyWave(new THREE.MeshStandardMaterial({ metalness: 0.4, roughness: 0.3 }), { rim: true });
const waveSphere = new THREE.Mesh(sphereGeometry, waveMaterial);
waveSphere.position.set(0, -0.25, 0);
scene.add(waveSphere);

// Sphere 3: MeshToonMaterial with a hard 2-band ramp for darker shadows
const toonRamp = new THREE.DataTexture(new Uint8Array([17, 17, 17, 255, 255, 255, 255, 255]), 2, 1);
toonRamp.magFilter = toonRamp.minFilter = THREE.NearestFilter;
toonRamp.needsUpdate = true;

const toonMaterial = applyWave(new THREE.MeshToonMaterial({ gradientMap: toonRamp }));
const toon = new THREE.Mesh(sphereGeometry, toonMaterial);
toon.position.set(2.5, -0.25, 0);
scene.add(toon);

// Animation with Three.js adapter

// Rotate the light around the scene
animate(lightRig, {
  rotateY: 360,
  duration: 6000,
  loop: true,
  ease: 'linear',
});

// Standard material fields auto-mapped through the mesh
animate(standard, {
  roughness: [1, 0.3, 1], // map to standard.material.roughness
  metalness: [0, 0.5, 0], // map to standard.material.metalness
  duration: 4000,
  loop: true,
});

// Wave sphere uniforms
animate(waveSphere, {
  uTime: { to: Math.PI * 2, ease: 'linear' }, // map to waveMaterial.uniforms.uTime.value
  uFrequencyX: () => utils.random(3, 10, 1), // map to waveMaterial.uniforms.uFrequency.value.x
  uFrequencyZ: () => utils.random(3, 10, 1), // map to waveMaterial.uniforms.uFrequency.value.z
  uAmplitude: () => utils.random(0.02, 0.08, 2), // map to waveMaterial.uniforms.uAmplitude.value
  uRim: [0, 0.5, 0], // map to waveMaterial.uniforms.uRim.value
  duration: 4000,
  loop: true,
  onLoop: self => self.refresh(),
});

// Toon sphere uniforms
animate(toon, {
  uTime: { to: Math.PI * 2, ease: 'linear' }, // map to toonMaterial.uniforms.uTime.value
  uFrequencyX: () => utils.random(50, 100),
  uFrequencyZ: () => utils.random(50, 100),
  uAmplitude: () => utils.random(0.05, 0.1, 2),
  duration: 3000,
  loop: true,
  onLoop: self => self.refresh(),
});

// Shared color cycle across all three spheres
animate([standard, waveSphere, toon], {
  color: ['var(--hex-green-1)', 'var(--hex-sky-1)', 'var(--hex-yellow-1)', 'var(--hex-green-1)'],
  duration: 6000,
  loop: true,
});

createTimer({ onUpdate: () => renderer.render(scene, camera) });

<div class="full-container"></div>