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

// Learn more: https://www.framer.com/docs/guides/overrides/

const useStore = createStore({
    count: 2,
})

export function withCount(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        let count = store.count.toString()
        return <Component {...props} text={count} />
    }
}

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

        return (
            <Component
                {...props}
                onClick={() => setStore({ count: store.count + 1 })}
            />
        )
    }
}

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

        return (
            <Component
                {...props}
                variant={store.count === 0 ? "Minus - Disabled" : "Minus"}
                onClick={() => {
                    if (store.count !== 0) {
                        setStore({ count: store.count - 1 })
                    } else {
                        return
                    }
                }}
            />
        )
    }
}