import { renderSlot } from "vue"
import ProviderComp from "./Provider.uvue"
import ConsumerComp from "./Consumer.uvue"

interface IProps {
	value : object
}

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

type TCreateContext = (key : string) => ContextValue

export const createContext : TCreateContext = (key) => {
	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 FnC = Consumer
	
	const value : ContextValue = {
		Provider: (): VNode=> {
			return h(ProviderComp, { contextKey: key },)
		},
		useContext,
		Consumer: h(ConsumerComp, { contextKey: key }),
		// Consumer: (): VNode=>{
		// 	const slots = useSlots()
		// 	const data = useContext()
		// 	// const FN : () => VNode = () => renderSlot(slots, 'default', data)
		// 	console.log(data);
		// 	return renderSlot(slots, 'default', data)
		// }
	}
	return value
}