const canvas = document.querySelector('canvas.webgl')
const scene = new THREE.Scene()

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

const params = {
	color: 0xffffff,
	slPositionX: 2.75,
	rotationY: -0.1,
	headRotationX: -0.05
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 2
scene.add(camera)

// Material
const material = new THREE.MeshLambertMaterial({ 
	color: params.color,
	emissive: 0xff00ff,
	emissiveIntensity: 0.03
})

// Lighting
const lightAmbient = new THREE.AmbientLight(0x9eaeff, 0.02)
const lightDirectional = new THREE.DirectionalLight(0x9eaeff, 0.25)
scene.add(lightAmbient)
scene.add(lightDirectional)

lightDirectional.position.z = 1

const spotLight = new THREE.SpotLight(0xffffff, 0.5);
spotLight.position.set(params.slPositionX, 3.75, 4.5)
spotLight.castShadow = true

spotLight.shadow.mapSize.width = 1800
spotLight.shadow.mapSize.height = 1800
spotLight.shadow.camera.fov = 75
scene.add(spotLight)

// Figure
const figure = new THREE.Group()
const geometry = new THREE.BoxGeometry(1, 1, 1)
const cube = new THREE.Mesh(geometry, material)
cube.castShadow = true

cube.position.set(0, 1.3, 0)
cube.scale.set(1.1, 1.1, 1.1)
cube.rotation.x = params.headRotationX

figure.add(cube)
scene.add(figure)

figure.position.x = 1
figure.position.y = -0.24
figure.position.z = -1
figure.rotation.y = params.rotationY

// Body
const bodyGeometry = new THREE.BoxGeometry(0.8, 1.1, 0.8)
const body = new THREE.Mesh(bodyGeometry, material)
body.castShadow = true
figure.add(body)

// Arms
const armGeometry = new THREE.BoxGeometry(0.2, 0.65, 0.2)
const arms = []

for(i = 0; i <= 2; i++) {
	const m = i === 0 ? -1 : 1
	const pivot = new THREE.Group()
	const arm = new THREE.Mesh(armGeometry, material)
	pivot.add(arm)
	body.add(pivot)
	
	pivot.position.y = 0.4
	pivot.position.x = 0.5 * m
	arm.castShadow = true
	arm.position.x = 0.1 * m
	arm.position.y = -0.25
	arms.push(pivot)
}

arms.forEach((arm) => figure.add(arm))

const pl = new THREE.PointLight(0xff0000, 1, 3, 1)
pl.position.set(1, 1.5, 0.5)
scene.add(pl)

const pl2 = new THREE.PointLight(0xff0000, 1, 3, 1)
pl2.position.set(-1, 1, -1)
scene.add(pl2)

// Eyes
const eyes = new THREE.Group()
const eyeGeometry = new THREE.SphereGeometry(0.1, 18, 18)
const eyeMaterial = new THREE.MeshLambertMaterial({ 
	color: 0x3c4361
})
for(i = 0; i <= 2; i++) {
	const eye = new THREE.Mesh(eyeGeometry, eyeMaterial)
	const x = i == 2 ? 0.25 : -0.25
	eyes.add(eye)
	eye.position.set(x, -0.05, 0.48)
}
cube.add(eyes)

// Surface
const planeGeometry = new THREE.PlaneGeometry(100, 100)
const plane = new THREE.Mesh(planeGeometry, material)
plane.receiveShadow = true
scene.add(plane)

plane.position.y = -0.65
plane.rotation.x = 90 / (Math.PI / 180)

const bg = new THREE.Mesh(planeGeometry, material)
bg.castShadow = false
bg.receiveShadow = true
scene.add(bg)

bg.position.x = 1
bg.position.z = -10

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor(0x172233, 1)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.render(scene, camera)

const createTween = () => {
	gsap.to(params, { 
		duration: 0.9,
		rotationY: 0.6,
		repeat: -1,
		repeatDelay: 0.3,
		yoyo: true,
		ease: 'back.out(1.4)'
	})
	
	gsap.to(params, {
		duration: 0.3,
		headRotationX: -0.2,
		repeat: -1,
		yoyo: true,
	})
}

createTween()

const moveArms = () => {
	arms.forEach((arm, i) => {
		const m = i == 0 ? 2 : -2
		arm.rotation.z = params.headRotationX * m
	})
}

const updateFigure = () => {
	figure.rotation.y = params.rotationY
	cube.rotation.x = params.headRotationX
	moveArms()
}

const draw = () => {
	updateFigure()
	
	// Update sizes
	sizes.width = window.innerWidth
	sizes.height = window.innerHeight

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

	// Update renderer
	renderer.setSize(sizes.width, sizes.height)
	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
	renderer.render(scene, camera)
}

gsap.ticker.add(draw)