import { Html, TransformControls } from '@react-three/drei';
import { useEffect, useRef, useState } from 'react'
import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
import CommentThreads from '../../../../../components/ui/collaboration/CommentThreads';
import { useSelectedComment } from '../../../../../store/builder/store';
import { Group, Object3D, Vector2, Vector3 } from 'three';
import { useThree } from '@react-three/fiber';

function CommentInstance({ comment }: { comment: CommentSchema }) {
    const { isPlaying } = usePlayButtonStore();
    const CommentRef = useRef(null);
    const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
    const { selectedComment, setSelectedComment, setPosition2Dstate } = useSelectedComment()
    const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
    const groupRef = useRef<Group>(null);
    const { size, camera } = useThree();
    // useEffect(() => {
    //     const handleKeyDown = (e: KeyboardEvent) => {
    //         const keyCombination = detectModifierKeys(e);
    //         if (!selectedComment) return;
    //         if (keyCombination === "G") {
    //             setTransformMode((prev) => (prev === "translate" ? null : "translate"));
    //         }
    //         if (keyCombination === "R") {
    //             setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
    //         }
    //     };

    //     window.addEventListener("keydown", handleKeyDown);
    //     return () => window.removeEventListener("keydown", handleKeyDown);
    // }, [selectedComment]);

    const commentClicked = () => {
        setSelectedComment(comment);
        const position = new Vector3(comment.position[0], comment.position[1], comment.position[2])

        position.project(camera);
        const x = (position.x * 0.5 + 0.5) * size.width;
        const y = (-(position.y * 0.5) + 0.2) * size.height;
        setPosition2Dstate({ x, y })

        if (groupRef.current) {
            setSelectedObject(groupRef.current);
        }
    }

    useEffect(() => {
        if (!selectedComment || selectedComment.threadId !== comment.threadId) {
            setSelectedObject(null)
        }
    }, [selectedComment])


    if (comment.state === 'inactive' || isPlaying) return null;
    return (

        <>
            <group ref={groupRef} position={comment.position} rotation={comment.rotation}>
                <Html
                    ref={CommentRef}
                    zIndexRange={[1, 0]}
                    prepend
                    sprite
                    center
                    // position={comment.position}
                    // rotation={comment.rotation}
                    className='comments-main-wrapper'
                >
                    <CommentThreads commentClicked={commentClicked} comment={comment} />
                </Html>
            </group>
            {/* {selectedObject && transformMode && (
                <TransformControls
                    object={selectedObject}
                    mode={transformMode}
                    onMouseUp={(e) => {
                        console.log("sad");
                    }}

                />
            )} */}
        </>
    )
}

export default CommentInstance;




