import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';


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

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();
const fontLoader = new FontLoader();
let shirtMesh;

const draco = new DRACOLoader()
draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/")
loader.setDRACOLoader(draco)

loader.load(
    '/models/ShirtBaked2.glb',
    function (gltf) {
        shirtMesh = gltf.scene;
        shirtMesh.position.set(0, -1, 0);
        shirtMesh.scale.set(5, 5, 5);

        shirtMesh.traverse((child) => {
            if (child.isMesh && child.material) {
                child.material = child.material.clone();
                child.material.color.set(0xffd700);
            }
        });

        scene.add(shirtMesh);
        addTextOnShirt();
        console.log('Model loaded successfully');
    },
    undefined,
    function (error) {
        console.error('Failed to load model:', error);
    }
);

const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.8 );
scene.add( ambientLight );
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
scene.add(directionalLight);

camera.position.z = 5;

function addTextOnShirt() {
    fontLoader.load('https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', (font) => {
        const textConfig = {
            font,
            size: 0.30,
            depth: 0.03,
            curveSegments: 10,
            bevelEnabled: true,
            bevelThickness: 0.005,
            bevelSize: 0.003,
            bevelSegments: 4,
        };

        const letsGeometry = new TextGeometry("Let's", textConfig);
        const doItGeometry = new TextGeometry(" do it", textConfig);

        letsGeometry.computeBoundingBox();
        doItGeometry.computeBoundingBox();

        const letsWidth = letsGeometry.boundingBox.max.x - letsGeometry.boundingBox.min.x;
        const doItWidth = doItGeometry.boundingBox.max.x - doItGeometry.boundingBox.min.x;

        letsGeometry.translate(-letsWidth / 2, 0, 0);
        doItGeometry.translate(-doItWidth / 2, 0, 0);

        const letsMaterial = new THREE.MeshStandardMaterial({
            color: 0xffd700,
            roughness: 0.35,
            metalness: 0.15,
        });

        const doItMaterial = new THREE.MeshStandardMaterial({
            color: 0xffffff,
            roughness: 0.35,
            metalness: 0.15,
        });

        const letsMesh = new THREE.Mesh(letsGeometry, letsMaterial);
        const doItMesh = new THREE.Mesh(doItGeometry, doItMaterial);

        letsMesh.position.set(0, 1, 1);
        doItMesh.position.set(0, 0.6, 1);

        const textGroup = new THREE.Group();
        textGroup.add(letsMesh);
        textGroup.add(doItMesh);
        textGroup.position.set(0, -0.45, 0.6);
        textGroup.rotation.x = 0;

        scene.add(textGroup);
    });
}

function animate(time) {
    renderer.render(scene, camera);
}

const controls = new OrbitControls( camera, renderer.domElement );