import { useState } from 'react';
import * as THREE from 'three'
import PillarJibAnimator from '../animator/pillarJibAnimator'
import PillarJibHelper from '../helper/pillarJibHelper'

function PillarJibInstance({ crane }: { crane: CraneStatus }) {
    const [animationPhase, setAnimationPhase] = useState<string>('idle');

    const position1: [number, number, number] = [5, 1, -4];
    const position2: [number, number, number] = [-2, 2, -2];

    const handleAnimationComplete = (action: string) => {
        if (action === 'picking') {
            setTimeout(() => {
                setAnimationPhase('init-hook-adjust');
            }, 3000)
        } else if (action === 'dropping') {
            setTimeout(() => {
                setAnimationPhase('idle');
            }, 3000)
        }
    }

    return (
        <>

            <PillarJibAnimator
                key={crane.modelUuid}
                crane={crane}
                points={[
                    new THREE.Vector3(...position1),
                    new THREE.Vector3(...position2)
                ]}
                animationPhase={animationPhase}
                setAnimationPhase={setAnimationPhase}
                onAnimationComplete={handleAnimationComplete}
            />

            {/* <PillarJibHelper
                crane={crane}
                points={[
                    new THREE.Vector3(...position1),
                    new THREE.Vector3(...position2)]
                }
            /> */}

        </>
    )
}

export default PillarJibInstance;