import type { FunctionComponent, PropsWithChildren } from "react"
// @ts-ignore -- createServerContext is not in @types/react atm
import { useContext, createServerContext } from "react"
import { cookies } from "next/headers"
import { Theme, THEME_COOKIE_NAME } from "./theme"
import { DEFAULT_THEME } from "./theme"

const ThemeContext = createServerContext<Theme | null>(null)

export function useServerTheme(): Theme {
	return useContext(ThemeContext)
}

const ThemeServerContextProvider: FunctionComponent<PropsWithChildren<{}>> = ({
	children
}) => {
	const cookiesList = cookies()
	const theme = cookiesList.get(THEME_COOKIE_NAME)?.value ?? DEFAULT_THEME
	return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
}

export default ThemeServerContextProvider