import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import eye from '../assets/images/eye.svg';
import mouth from '../assets/images/mouth.svg';
import '../avainteractive.css';
import { getPointingVector } from '../utils';
import { newTimer } from '../timer';
import { AVA_INTERACTIVE_ACTIONS } from '../constants';
const Avainteractive = (props) => {
    const ref = useRef(undefined);
    const [action, setAction] = useState();
    const activityTimer = useRef(newTimer({
        name: "User Activity",
        //onUpdate:(timer)=>console.log(timer.time),
    })).current;
    const boredTime = useRef(20000).current;
    const sleepTime = useRef(40000).current;
    const engine = useRef(undefined);
    const actionRef = useRef(undefined);
    const mouthWidth = 4 * props.eyeWidth;
    const facialGap = (4 / 3) * props.eyeWidth;
    function updateMousePosition(event) {
        let pointer = { x: event.clientX, y: event.clientY };
        if (ref) {
            activityTimer.resetTimer(activityTimer.id);
            const dim = ref.current.getBoundingClientRect();
            let originLeftEye = { x: dim.x, y: dim.y + (dim.height / 2) };
            let originRightEye = { x: dim.x + dim.width, y: dim.y + (dim.height / 2) };
            setAction({
                name: AVA_INTERACTIVE_ACTIONS.LOOKATPOINTER,
                data: {
                    leftEye: getPointingVector(originLeftEye, pointer, 2.5 * (props.eyeWidth / 7)),
                    rightEye: getPointingVector(originRightEye, pointer, 2.5 * (props.eyeWidth / 7))
                }
            });
        }
    }
    useEffect(() => {
        actionRef.current = action;
    }, [action]);
    useEffect(() => {
        document.addEventListener('mousemove', updateMousePosition);
        if (!activityTimer.getTimer(activityTimer.id)?.ref) {
            activityTimer.startTimer(activityTimer.id);
        }
        if (!engine.current) {
            engine.current = setInterval((activityTimer) => {
                let currentAction = actionRef.current;
                //console.log("action",currentAction);
                let timer = activityTimer.getTimer(activityTimer.id);
                if (timer && timer.time > 1000 && timer.time <= boredTime) {
                    setAction({
                        name: AVA_INTERACTIVE_ACTIONS.BLINK
                    });
                }
                if (timer && timer.time > boredTime && timer.time <= sleepTime && currentAction?.name != AVA_INTERACTIVE_ACTIONS.BORED) {
                    setAction({
                        name: AVA_INTERACTIVE_ACTIONS.BORED,
                        data: Math.round(Math.random()) + 1
                    });
                }
                if (timer && timer?.time > sleepTime && currentAction?.name != AVA_INTERACTIVE_ACTIONS.SLEEPY) {
                    setAction({
                        name: AVA_INTERACTIVE_ACTIONS.SLEEPY,
                        data: 1
                    });
                    setTimeout(() => {
                        setAction({
                            name: AVA_INTERACTIVE_ACTIONS.SLEEPY,
                            data: 0.1
                        });
                    }, 100);
                }
            }, 10, activityTimer);
        }
        return () => {
            document.removeEventListener("mousemove", updateMousePosition);
            activityTimer.stopTimer(activityTimer.id);
            engine.current ? clearInterval(engine.current) : null;
            engine.current = undefined;
        };
    }, []);
    return (_jsxs("div", { className: 'ava-interactive-wrapper', style: { gap: facialGap + "px", transform: "scale(" + (props.scale ? props.scale : 1) + ")" }, children: [_jsxs("div", { ref: ref, className: 'eyes-wrapper', style: { gap: facialGap + "px" }, children: [action?.name == AVA_INTERACTIVE_ACTIONS.SLEEPY
                        ?
                            _jsx("img", { src: eye, className: 'eye-L-sleepy', style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px", transform: "translateX(0) translateY(0) scaleY(" + action?.data + ")" } })
                        :
                            action?.name == AVA_INTERACTIVE_ACTIONS.BLINK
                                ?
                                    _jsx("img", { src: eye, className: 'eye-L-blink', style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px" } })
                                :
                                    action?.name == AVA_INTERACTIVE_ACTIONS.BORED
                                        ?
                                            _jsx("img", { src: eye, className: 'eye-L-bored-' + action?.data, style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px" } })
                                        :
                                            _jsx("img", { style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px", transform: "scaleY(" + (action?.name == AVA_INTERACTIVE_ACTIONS.SLEEPY ? action?.data : "1") + ") translateX(" + (action?.name == AVA_INTERACTIVE_ACTIONS.LOOKATPOINTER ? action?.data.leftEye.x : "0") + "px) translateY(" + (action?.name == AVA_INTERACTIVE_ACTIONS.LOOKATPOINTER ? (-1 * action?.data.leftEye.y) : "0") + "px)" }, src: eye, className: 'eye-L' }), action?.name == AVA_INTERACTIVE_ACTIONS.SLEEPY
                        ?
                            _jsx("img", { src: eye, className: 'eye-L-sleepy', style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px", transform: "translateX(0) translateY(0) scaleY(" + action?.data + ")" } })
                        :
                            action?.name == AVA_INTERACTIVE_ACTIONS.BLINK
                                ?
                                    _jsx("img", { src: eye, className: 'eye-L-blink', style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px" } })
                                :
                                    action?.name == AVA_INTERACTIVE_ACTIONS.BORED
                                        ?
                                            _jsx("img", { src: eye, className: 'eye-R-bored-' + action?.data, style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px" } })
                                        :
                                            _jsx("img", { style: { width: props.eyeWidth + "px", height: props.eyeWidth + "px", transform: "translateX(" + (action?.name == AVA_INTERACTIVE_ACTIONS.LOOKATPOINTER ? action?.data.rightEye.x : "0") + "px) translateY(" + (action?.name == AVA_INTERACTIVE_ACTIONS.LOOKATPOINTER ? (-1 * action?.data.rightEye.y) : "0") + "px)" }, src: eye, className: 'eye-R' })] }), _jsx("img", { src: mouth, className: 'mouth', style: { width: mouthWidth + "px" } })] }));
};
export default Avainteractive;
//# sourceMappingURL=Avainteractive.js.map