import React, { useEffect, useMemo, useRef, useState } from 'react'
import * as THREE from "three";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { clone } from "three/examples/jsm/utils/SkeletonUtils";
import { useLoader, useThree } from "@react-three/fiber";
import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver";
import { TransformControls } from '@react-three/drei';

type IKInstanceProps = {
    modelUrl: string;
    ikSolver: any;
    setIkSolver: any
    armBot: any;
    groupRef: any;
};
function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKInstanceProps) {
    const { scene } = useThree()
    const gltf = useLoader(GLTFLoader, modelUrl, (loader) => {
        const draco = new DRACOLoader();
        draco.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/");
        loader.setDRACOLoader(draco);
    });
    const cloned = useMemo(() => clone(gltf?.scene), [gltf]);
    const targetBoneName = "Target";
    const skinnedMeshName = "link_0";
    const [selectedArm, setSelectedArm] = useState<THREE.Group>();

    useEffect(() => {
        if (!gltf) return;
        const OOI: any = {};
        cloned.traverse((n: any) => {
            if (n.name === targetBoneName) OOI.Target_Bone = n;
            if (n.name === skinnedMeshName) OOI.Skinned_Mesh = n;
        });
        if (!OOI.Target_Bone || !OOI.Skinned_Mesh) return;
        const iks = [
            {
                target: 7,
                effector: 6,
                links: [
                    {
                        index: 5,
                        enabled: true,
                        rotationMin: new THREE.Vector3(-Math.PI / 2, 0, 0),
                        rotationMax: new THREE.Vector3(Math.PI / 2, 0, 0),
                    },
                    {
                        index: 4,
                        enabled: true,
                        rotationMin: new THREE.Vector3(-Math.PI / 2, 0, 0),
                        rotationMax: new THREE.Vector3(0, 0, 0),
                    },
                    {
                        index: 3,
                        enabled: true,
                        rotationMin: new THREE.Vector3(0, 0, 0),
                        rotationMax: new THREE.Vector3(2, 0, 0),
                    },
                    { index: 1, enabled: true, limitation: new THREE.Vector3(0, 1, 0) },
                    { index: 0, enabled: false, limitation: new THREE.Vector3(0, 0, 0) },
                ],
            },
        ];

        const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks);
        setIkSolver(solver);

        const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)

        setSelectedArm(OOI.Target_Bone);

        scene.add(helper);

    }, [cloned, gltf, setIkSolver]);

    return (
        <>
            <group ref={groupRef} position={armBot.position} rotation={armBot.rotation} onClick={() => {
                setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
            }}>
                <primitive
                    uuid={"ArmBot-X200"}
                    object={cloned}
                    scale={[1, 1, 1]}
                    name={`arm-bot11`}
                />
            </group>
            {/* {selectedArm && <TransformControls object={selectedArm} />} */}
        </>
    )
}

export default IKInstance;