import Stats from "https://cdn.skypack.dev/stats.js@0.17.0";
let renderer
    , controls
    , scene
    , camera
    , w, h
    , statsFps
    , statsMs

const material = new THREE.MeshPhongMaterial( { color: '#ff3300', side: 2} );
let t = 0;
let lt = Date.now();
let tl = 0;

resize()
init()
animate()

function rand(min, max) {
    return Math.random() * (max - min) + min
}

function resize() {
    w = document.body.clientWidth
    h = document.body.clientHeight
    if (!camera) {
        return
    }
    
    camera.aspect = w / h
    camera.updateProjectionMatrix()
    renderer.setSize(w, h)
}

function init() {
    
    scene = new THREE.Scene()

    camera = new THREE.PerspectiveCamera(75, w / h, 1, 6000)
    camera.position.z = 50
    
    renderer = new THREE.WebGLRenderer({alpha: true})
    renderer.setSize(w, h)
    renderer.setClearColor("#0C7CA5", 0)
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.sortObjects = false
    renderer.autoClear = false
    renderer.generateMipmaps = false
    
    let light = new THREE.HemisphereLight('#fff', '#eee', 2)
    light.position.set(0, 0, 300)
    light.castShadow = true
    scene.add(light)

    light = new THREE.PointLight(0x222222, 3)
    light.position.x = 1000
    light.position.y = 500
    light.position.z = 1000
    light.castShadow = true
    scene.add(light)    
    
    camera.lookAt(scene.position)
    
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    document.body.appendChild(renderer.domElement)
        
    statsFps = new Stats()
    document.body.appendChild(statsFps.dom)
    
    statsMs = new Stats()
    statsMs.showPanel(1)
    document.body.appendChild(statsMs.dom)
    
    window.addEventListener('resize', resize, false)
    create(scene)
}

function create(scene) {
    const geometry = new THREE.CylinderBufferGeometry( 7, 7, 40, 140, 120, true );
    //const geometry = new THREE.PlaneBufferGeometry(2 * 7 * Math.PI, 10, 140, 70);
    material.map =
    material.displacementMap =
    // material.normalMap =
            new THREE.Texture(generateBump(2 * 7 * Math.PI, 40, 0));

    material.map.needsUpdate = true;

    material.normalScale = new THREE.Vector2( 1, - 1 );

    material.displacementScale = 6;
    material.displacementBias = - 0.428408;

    const cylinder = new THREE.Mesh( geometry, material );

    scene.add(cylinder);
}

function animate() {
    
    requestAnimationFrame(animate)
    
    update()
    
    renderer.clear()
    renderer.render(scene, camera)
    
    controls.update()
    statsFps.update()
    statsMs.update()
    
}

function update() {
    
    t = Date.now() - lt;
    
    if (t < 100) 
        return
        
    lt = Date.now();
    
    material.map =
    material.displacementMap =
    // material.normalMap =
            new THREE.Texture(generateBump(2 * 7 * Math.PI, 40, lt));

    material.map.needsUpdate = true;
}

var ttl = 0;
function generateBump(w, h, time) {

    var temp = document.createElement('canvas');
    temp.width = (w*10) | 0;
    temp.height = (h*10) | 0;
    var wm = w | 0;
    var hm = h | 0;
    var ws = wm;
    var hs = hm;
    
    
    var ctx = temp.getContext('2d');    
    
    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(0, 0, temp.width, temp.height);
    
    while(ws--) {
        hs = hm
        while(hs--) {
            var tt = (ws % 4) - 1;
            if (!tt) {
                tl+=.5
            }
            ctx.fillStyle = tt ? 'hsla(0, 0%, 0%, 1)' : 'hsla(0, 0%, '+ Math.sin(tl) * 100 +'%, 1)';
            ctx.translate(ws *  10, hs * 10);
            ctx.fillRect(0, 0, 10, 10);
            ctx.translate(-ws * 10, -hs * 10);
        }
    }
    
    // let img = new Image();
    // img.src = temp.toDataURL();

    return temp;
}