import React, { useState, useEffect } from "react";
import type { ComponentType } from "react";
import { motion, useSpring } from "framer-motion";
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0";

// Make edits here
const ROTATION_AMOUNTS = [0, 5, -5, 0];
const X_MOVEMENT_AMOUNTS = [3, -3, 0];
const X_MOVEMENT_DURATIONS = [250, 500]; // durations for each x movement
const SHAKE_DURATION = 500;
const SPRING_CONFIG = { stiffness: 500, damping: 10 };
const INTERVAL_TIME = 10000; // 10 seconds


const useStore = createStore({
    shake: false,
});

export const triggerHover = (Component): ComponentType => {
    return (props) => {
        const [store, setStore] = useStore();

        useEffect(() => {
            const interval = setInterval(() => {
                setStore({ shake: true });

                setTimeout(() => setStore({ shake: false }), SHAKE_DURATION);
            }, INTERVAL_TIME);

            return () => clearInterval(interval); 
        }, []);

        return (
            <Component
                {...props}
                as={motion.div}
                animate={{ rotate: store.shake ? ROTATION_AMOUNTS : 0 }}
                transition={{ duration: SHAKE_DURATION / 1000 }}
            />
        );
    };
}

export function withShakingSpringAnimation(Component): ComponentType {
    return (props) => {
        const [store] = useStore();
        const x = useSpring(0, SPRING_CONFIG);

        useEffect(() => {
            if (store.shake) {
                x.set(X_MOVEMENT_AMOUNTS[0]);
                setTimeout(() => x.set(X_MOVEMENT_AMOUNTS[1]), X_MOVEMENT_DURATIONS[0]);
                setTimeout(() => x.set(X_MOVEMENT_AMOUNTS[2]), X_MOVEMENT_DURATIONS[1]);
            }
        }, [store.shake]);

        return <Component {...props} as={motion.div} style={{ x: x }} />;
    };
}