import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
import { gpstoVec3 } from '../../utils/helpers';
import { Object3D } from 'three';
import gsap from 'gsap';
export default forwardRef(function Marker({ location, temp = new Object3D() }, ref) {
    const circleRef = useRef(null);
    const dotRef = useRef(null);
    const position = useMemo(() => {
        return gpstoVec3(location.coordinates.lat, location.coordinates.lng);
    }, [location]);
    const rotation = useMemo(() => {
        temp.position.copy(position);
        temp.lookAt(position.clone().multiplyScalar(1.1));
        return temp.rotation.clone();
    }, [position, temp]);
    useEffect(() => {
        const circle = circleRef.current;
        const dot = dotRef.current;
        if (!circle || !dot) {
            return;
        }
        circle.frustumCulled = false;
        dot.frustumCulled = false;
    }, []);
    useImperativeHandle(ref, () => ({
        impact: () => {
            const circle = circleRef.current;
            const dot = dotRef.current;
            if (!circle || !dot) {
                return;
            }
            const tl = gsap.timeline({});
            tl.set(circle.scale, { x: 0.01, y: 0.01, z: 0.01 });
            tl.set(circle.material, { opacity: 0 });
            tl.to(circle.scale, {
                x: 3,
                y: 3,
                z: 3,
                ease: 'expo.out',
                duration: 1.5,
            }, 0);
            tl.to(circle.material, {
                opacity: 0.3,
                ease: 'none',
                duration: 0.3,
            }, 0);
            tl.to(circle.material, {
                opacity: 0,
                ease: 'none',
                duration: 0.5,
            }, '>');
            tl.totalDuration(1);
            gsap.fromTo(dot.scale, {
                x: 0.01,
                y: 0.01,
                z: 0.01,
            }, {
                x: 1,
                y: 1,
                z: 1,
                duration: 0.4,
                ease: 'power3.out',
            });
        },
        appear: () => {
            const dot = dotRef.current;
            if (!dot) {
                return;
            }
            gsap.to(dot.scale, {
                x: 1,
                y: 1,
                z: 1,
                duration: 0.8,
                ease: 'power3.out',
            });
        },
        vanish: () => {
            const dot = dotRef.current;
            if (!dot) {
                return;
            }
            gsap.to(dot.scale, {
                x: 0.01,
                y: 0.01,
                z: 0.01,
                duration: 0.3,
                ease: 'power2.in',
            });
        },
    }), []);
    return (React.createElement("group", { position: position, rotation: rotation },
        React.createElement("mesh", { ref: circleRef, scale: [0.01, 0.01, 0.01] },
            React.createElement("ringGeometry", { args: [0.02, 0.03, 48] }),
            React.createElement("meshBasicMaterial", { color: 'white', transparent: true, opacity: 0, toneMapped: false, depthTest: false })),
        React.createElement("mesh", { ref: dotRef, scale: [0.01, 0.01, 0.01] },
            React.createElement("sphereGeometry", { args: [0.015, 8, 8] }),
            React.createElement("meshBasicMaterial", { color: 'white', transparent: true, opacity: 0.9, toneMapped: false }))));
});
