import type { ComponentType } from "react"
import { useRef } from "react"
import {
    motion,
    useMotionValue,
    useTransform,
    useAnimation,
} from "framer-motion"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

/// Create a store for cards to reset
const useStore = createStore({
    lastReset: 0,
})

export function withSwipeToDismiss(Component, cardId): ComponentType {
    return (props) => {
        const constraintsRef = useRef(null)
        const controls = useAnimation()
        const [store, setStore] = useStore()

        const x = useMotionValue(0)
        const rotate = useTransform(x, [-100, 100], [-10, 10])
        const dragThreshold = 100

        // This will hold the last reset timestamp that this card has seen.
        const lastReset = useRef(0)

        const handleDragEnd = (event, info) => {
            if (Math.abs(info.offset.x) > dragThreshold) {
                controls.start({
                    x: info.offset.x > 0 ? 2000 : -2000,
                    opacity: 0,
                    transition: { duration: 0.5 },
                })
            } else {
                controls.start({
                    x: 0,
                    opacity: 1,
                    transition: { duration: 0.5 },
                })
            }
        }

        // Listen for reset events from the store
        if (store && store.lastReset > lastReset.current) {
            lastReset.current = store.lastReset // Remember this reset
            controls.start({
                x: 0,
                opacity: 1,
                transition: { duration: 0.5 },
            })
        }

        return (
            <motion.div className="container" ref={constraintsRef}>
                <Component
                    {...props}
                    as={motion.div}
                    style={{
                        ...props.style,
                        x: x,
                        rotate: rotate,
                        transformOrigin: "center",
                    }}
                    animate={controls}
                    drag="x"
                    dragConstraints={constraintsRef}
                    onDragEnd={handleDragEnd}
                />
            </motion.div>
        )
    }
}

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

        const onClick = () => {
            setStore({ lastReset: Date.now() })
        }

        return <Component {...props} onClick={onClick} />
    }
}