import { renderSlot } from "vue"

interface IProps {
	value : object
}

type ContextValue = {
	Provider : any
	useContext : () => any
	Consumer : any
}

type TCreateContext = (key : string) => ContextValue

export const createContext : TCreateContext = (key) => {
	const Provider = {
		props: {
			value: {
				type: Object,
				required: true
			}
		},
		setup(props : IProps) {
			const slots = useSlots()
			provide(key, props.value)
			const FN : () => VNode = () => renderSlot(slots, 'default')
			return () : VNode => h(FN)
		}
	}
	const useContext : () => any = () : any => {
		return inject(key) as any
	}
	const Consumer = {
		setup() {
			const slots = useSlots()
			const data = useContext()
			const FN : () => VNode = () => renderSlot(slots, 'default', data)
			return () : VNode => h(FN, {})
		}
	}
	
	const FnP = Provider
	const FnC = Consumer
	
	const value: ContextValue = {
		Provider: FnP,
		useContext,
		Consumer: FnC,
	}
	return value
}