// ===============================
// THREE.JS 3D BACKGROUND
// ===============================

const canvas = document.querySelector("#bg");

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
});

renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 30;

// Create particles
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 5000;

const posArray = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount * 3; i++) {
    posArray[i] = (Math.random() - 0.5) * 200;
}

particlesGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(posArray, 3)
);

const particlesMaterial = new THREE.PointsMaterial({
    size: 0.5,
    color: 0x4e73df
});

const particlesMesh = new THREE.Points(
    particlesGeometry,
    particlesMaterial
);

scene.add(particlesMesh);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    particlesMesh.rotation.y += 0.0007;
    particlesMesh.rotation.x += 0.0003;

    renderer.render(scene, camera);
}

animate();

// Resize
window.addEventListener("resize", () => {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

});


// ===============================
// QR PREVIEW CODE
// ===============================

const dataInput = document.querySelector("input[name='data']");
const fillColorInput = document.querySelector("input[name='fill_color']");
const backColorInput = document.querySelector("input[name='back_color']");
const sizeSelect = document.querySelector("select[name='size']");
const logoInput = document.querySelector("input[name='logo']");
const form = document.querySelector("form");

// Preview container
const previewContainer = document.createElement("div");
previewContainer.style.marginTop = "20px";
previewContainer.style.textAlign = "center";

const previewImg = document.createElement("img");
previewImg.style.maxWidth = "200px";

previewContainer.appendChild(previewImg);
form.appendChild(previewContainer);

// Generate preview
function generatePreview() {

    const data = dataInput.value.trim();
    const fillColor = fillColorInput.value;
    const backColor = backColorInput.value;
    const size = sizeSelect.value;

    if (data === "") {
        previewImg.src = "";
        return;
    }

    previewImg.src =
        `https://api.qrserver.com/v1/create-qr-code/?size=${size * 25}x${size * 25}&data=${encodeURIComponent(data)}&color=${fillColor.replace('#', '')}&bgcolor=${backColor.replace('#', '')}`;
}

// Events
dataInput.addEventListener("input", generatePreview);
fillColorInput.addEventListener("input", generatePreview);
backColorInput.addEventListener("input", generatePreview);
sizeSelect.addEventListener("change", generatePreview);

// Form validation
form.addEventListener("submit", function (e) {

    if (dataInput.value.trim() === "") {
        e.preventDefault();
        alert("Please enter Asset ID!");
    }

});