import './css/style.styl'

import './css/reset.styl'
import OrbitControls from 'threejs-orbit-controls';
import * as THREE from 'three'
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";

import Px from './images/space/px.jpg'
import Py from './images/space/py.jpg'
import Pz from './images/space/pz.jpg'
import Nx from './images/space/nx.jpg'
import Ny from './images/space/ny.jpg'
import Nz from './images/space/nz.jpg'

/**
 * Textures
 */
const cubeTextureLoader = new THREE.CubeTextureLoader()

const textureCube = cubeTextureLoader.load( [
    Px, Nx,
    Py, Ny,
    Pz, Nz
] );

/**
 * Scene
 */
const scene = new THREE.Scene({background: textureCube})

var cubeShader = THREE.ShaderLib[ "cube" ];
                var cubeMaterial = new THREE.ShaderMaterial( {
                    fragmentShader: cubeShader.fragmentShader,
                    vertexShader: cubeShader.vertexShader,
                    uniforms: cubeShader.uniforms,
                    depthWrite: false,
                    side: THREE.BackSide
                } );
                cubeMaterial.uniforms[ "tCube" ].value = textureCube;
                Object.defineProperty( cubeMaterial, 'map', {
                    get: function () {
                        return this.uniforms.tCube.value;
                    }
                } );
                // Skybox
                const cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
                scene.add( cubeMesh );
/**
 * Sizes
 */
const sizes = {}
sizes.width = window.innerWidth
sizes.height = window.innerHeight

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera``
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update
    renderer.setSize(sizes.width, sizes.height)
})


/**
 * Cursor
 */
const cursor = new THREE.Vector2();

window.addEventListener('mousemove', (_event) => {
    cursor.x = (event.clientX / window.innerWidth) * 2 - 1;
    cursor.y = - (event.clientY / window.innerHeight) * 2 + 1;
})

/* Lumière */

const ambientLight = new THREE.AmbientLight(0x8e44ad, 0.5)
scene.add(ambientLight)

const sunLight = new THREE.DirectionalLight(0xffcccc, 1.2)
sunLight.position.x = 1
sunLight.position.y = 1
sunLight.position.z = 10
scene.add(sunLight)


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)

camera.position.z = 5
scene.add(camera)

let belt = {}
belt.geometry = new THREE.Geometry()
for (let i = 0; i < 5000; i++) {
    const vertice = new THREE.Vector3()

    const angle = Math.random() * Math.PI * 2
    const distance = 1.5 + Math.random() * 1.5

    vertice.x = Math.random() * 100 - 100 / 2
    vertice.y = Math.random() * 100 - 100 / 2
    vertice.z = Math.random() * 100 - 100 / 2

    belt.geometry.vertices.push(vertice)
}

belt.material = new THREE.PointsMaterial({
    size: 0.01,
    //sizeAttenuation: false,
    transparent: true
})
belt.points = new THREE.Points(belt.geometry, belt.material)
scene.add(belt.points)


let geometry = new THREE.SphereBufferGeometry(1, 4, 4);
let material;
let i, mesh;

for(i = 0; i < 100; ++i) {

    material = new THREE.MeshPhongMaterial({
        color: 0xffffff * Math.random(),
        flatShading: true
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
    mesh.position.multiplyScalar(Math.random() * 4);
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
    mesh.scale.multiplyScalar(Math.random() * 0.5);
    scene.add(mesh);

}

const renderer = new THREE.WebGLRenderer()
renderer.setSize(sizes.width, sizes.height)
document.body.appendChild(renderer.domElement)

const composer = new EffectComposer(renderer)
var bloomEffect = new BloomEffect();
const effectPass = new EffectPass(camera, bloomEffect);
effectPass.renderToScreen = true;

composer.addPass(effectPass);
effectPass.renderToScreen = true
/* Controls */

var controls = new OrbitControls( camera, renderer.domElemen );
controls.maxDistance = 50;
controls.minDistance = 0;

/**
 * Loop
 */
const loop = () => {
    window.requestAnimationFrame(loop)

    //camera.position.x = cursor.x * 3
    //camera.position.y = - cursor.y * 3
    camera.lookAt(new THREE.Vector3())
    camera.updateMatrixWorld();

    controls.update();

    // Renderer
    //renderer.render(scene, camera)
    composer.render();
}
loop()