import { inject, provide, reactive, watchEffect } from 'vue'

function createContext<T extends Record<string, any>>(defaultValue?: T) {
  const contextKey = Symbol('contextKey')
  const useProvide = (props: T, newProps?: T) => {
    const mergedProps = reactive<T>({} as T)
    provide(contextKey, mergedProps)
    watchEffect(() => {
      Object.assign(mergedProps, props, newProps || {})
    })
    return mergedProps
  }
  const useInject = () => {
    return inject(contextKey, defaultValue as T) || ({} as T)
  }
  return {
    useProvide,
    useInject,
  }
}

export default createContext
