import "./style.css"
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
import WebGL from "three/examples/jsm/capabilities/WebGL"
import { gsap } from "gsap"

let scene,
    camera,
    renderer,
    analyzer,
    controls,
    canvas,
    tick = 0,
    clock = new THREE.Clock(),
    composer

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

function _init() {
    _createScene()
    _createCamera()
    _createRenderer()
    _addLoaders()
    _createControls()
    _compatibility()

    const audioBtn = document.querySelector("#audio-btn")
    audioBtn.addEventListener(
        "click",
        () => {
            const tl = new gsap.timeline({
                onComplete: () => {
                    _loadMusic()
                },
            })

            tl.set("#audio-btn-icon", { transition: "none" }).to("#audio-btn-label", { "--clip": 1, duration: 0.6 }).to("#audio-btn-icon", { rotation: 140, scale: 0.8, duration: 0.5 }, "<0.05").to("#audio-btn-icon", { opacity: 0, duration: 0.65 }, "<").to(audioBtn, { width: 66, ease: "back.inOut(2)", duration: 0.9 }, "<0.2")
        },
        { once: true }
    )

    renderer.setAnimationLoop(() => {
        _update()
        _render()
    })
}

function destroy() {
    renderer.dispose()
    _removeListeners()
}

function _update() {
    const elapsed = clock.getElapsedTime()

    if (!!analyzer) {
        const d = analyzer.getFrequencyData()

        const o = d.reduce((prev, curr) => prev + curr, 0)

        tick += 0.01
        camera.position.x = Math.sin(tick * 0.63) * 2.7 * 0
        camera.position.y = Math.sin(tick * 0.84) * 2.15 * 0
        camera.position.z = Math.cos(tick * 0.39) * 4.5 * 0
        camera.lookAt(scene.position)
    }
}

function _createScene() {
    canvas = document.querySelector("canvas.webgl")
    scene = new THREE.Scene()

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
    scene.add(ambientLight)

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6)
    directionalLight.castShadow = true
    directionalLight.shadow.mapSize.set(1024, 1024)
    directionalLight.shadow.camera.far = 15
    directionalLight.shadow.camera.left = -7
    directionalLight.shadow.camera.top = 7
    directionalLight.shadow.camera.right = 7
    directionalLight.shadow.camera.bottom = -7
    directionalLight.position.set(-5, 5, 0)
    scene.add(directionalLight)
}

function _createCamera() {
    camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
    camera.position.set(2, 10, 20)
    scene.add(camera)
}

function _createRenderer() {
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        alpha: false,
        antialias: true,
    })
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
}

function _loadMusic() {
    const listener = new THREE.AudioListener()

    const audio = new THREE.Audio(listener)
    const file = "/music/axelf.mp3"

    if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) {
        const loader = new THREE.AudioLoader()
        loader.load(file, (buffer) => {
            const tl = new gsap.timeline({
                onComplete: () => {
                    audio.setBuffer(buffer)
                    audio.setLoop(true)
                    audio.setVolume(0.1)

                    analyzer = new THREE.AudioAnalyser(audio, 128)

                    gsap.delayedCall(0.3, () => {
                        audio.play()
                    })

                    resolve()
                },
            })
            tl.add("start")
                .to("#audio-btn", {
                    scale: 0,
                    duration: 0.6,
                    ease: "back.in(2)",
                })
                .to("#audio-btn", { autoAlpha: true, duration: 0.65 }, "start+=0.3")
        }),
            (progress) => {
                gsap.to("#audio-btn-loader", {
                    "--scale": () => progress.loaded / progress.total,
                    duration: 0.15,
                    overwrite: true,
                    ease: "power1.out",
                })
            }
    } else {
        const mediaElement = new Audio(file)
        mediaElement.play()

        audio.setMediaElementSource(mediaElement)
    }
}

function _addLoaders() {

    const dracoLoader = new DRACOLoader()
    dracoLoader.setDecoderPath("/draco/")

    const gltfLoader = new GLTFLoader()
    gltfLoader.setDRACOLoader(dracoLoader)

    gltfLoader.load("/models/Eskelunden/glTF/eskelunden.gltf", (gltf) => {
        console.log(gltf.scene.children)
        gltf.scene.children[0].material.wireframe = false

        gltf.scene.scale.set(0.025, 0.025, 0.025)
        scene.add(gltf.scene)
    })
}

function _createControls() {
    controls = new OrbitControls(camera, canvas)
    controls.target.set(0, 0.75, 0)
    controls.enableDamping = true
}

function _render() {
    renderer.render(scene, camera)
}

function _compatibility() {
    if (WebGL.isWebGLAvailable()) {
        // Initiate function or other initializations here
        _update()
    } else {
        const warning = WebGL.getWebGLErrorMessage()
        document.getElementById("container").appendChild(warning)
    }
}

function _addListeners() {
    window.addEventListener("resize", _resizeCb, { passive: true })
}

function _removeListeners() {
    window.removeEventListener("resize", _resizeCb, { passive: true })
}

function _onResize() {
    camera.aspect = container.clientWidth / container.clientHeight
    camera.updateProjectionMatrix()

    renderer.setSize(container.clientWidth, container.clientHeight)
    composer.setSize(container.clientWidth, container.clientHeight)
}

_init()