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

import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";

function ThreadInstance({ thread }: { readonly thread: ThreadSchema }) {
    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(thread);
        const position = new Vector3(thread.position[0], thread.position[1], thread.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 !== thread.threadId) {
            setSelectedObject(null);
        }
    }, [selectedComment]);

    if (thread.state === "inactive" || isPlaying) return null;

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

export default ThreadInstance;
