// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// Swipe and Variant Management Override
// Version 1.0

import { Override, Data, motionValue } from "framer"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import type { ComponentType } from "react"

// Step 1: Set up the store with default variants and last position
// The store manages state for the slide and top variants as well as
// the last x-position for swipe-based tracking.
const useStore = createStore({
    slideVariant: "v1", // Default variant for sliding component
    topVariant: "t1", // Default variant for top component
    lastPosition: 0, // Initial last x-position for swipe logic
})

// Step 2: Higher-Order Component (HOC) to pass the slide variant to the component
// Wraps the given component and passes down the slide variant from the store.
export function withSlideVariant(Component): ComponentType {
    return (props) => {
        const [store] = useStore()
        return <Component {...props} variant={store.slideVariant} />
    }
}

// HOC to pass the top variant to the component
// Wraps the given component and passes down the top variant from the store.
export function withTopVariant(Component): ComponentType {
    return (props) => {
        const [store] = useStore()
        return <Component {...props} variant={store.topVariant} />
    }
}

// Step 3: Swipe Override for the slide button
// Configures drag behavior and updates the store on drag end.
const data = Data({
    x: motionValue(0), // Initial x-position for swipe
    dragConstraints: { left: 0, right: 180 }, // Drag boundaries for swipe
})

// Override for the swipe component that responds to drag events
export function Swipe(): Override {
    const [store, setStore] = useStore()

    return {
        drag: "x", // Enable horizontal dragging
        dragConstraints: data.dragConstraints, // Set drag constraints
        x: data.x, // Bind x-position to data state
        onDragEnd: (event, info) => {
            // Triggered when drag ends
            const { x } = info.point // Get the final x-position
            const swipedRight = x > store.lastPosition

            // Update the store based on swipe direction
            setStore({
                ...store,
                slideVariant: swipedRight
                    ? store.slideVariant === "v1"
                        ? "v2"
                        : "v1"
                    : store.slideVariant === "v2"
                      ? "v1"
                      : "v2",
                topVariant: swipedRight ? "t2" : "t1",
                lastPosition: x, // Save the last x-position
            })
        },
    }
}

// Step 4: Override for the top component with instant switching
// Provides an instant transition effect for the top component based on variant
export function TopComponentSwipe(): Override {
    const [store] = useStore()

    return {
        variant: store.topVariant, // Bind variant to top variant in store
        transition: { duration: 0 }, // Instant transition on variant change
    }
}

// Example component to demonstrate usage
const MyComponent = (props) => {
    return <div>Current Slide Variant: {props.variant}</div> // Displays current slide variant
}

const TopComponent = (props) => {
    return <div>Current Top Variant: {props.variant}</div> // Displays current top variant
}

// Wrap the components with the HOCs
export const WrappedMyComponent = withSlideVariant(MyComponent) // Component with slide variant
export const WrappedTopComponent = withTopVariant(TopComponent) // Component with top variant