"use client"

import * as React from"react"
import { ThemeProvider as NextThemesProvider, useTheme } from"next-themes"

function ThemeProvider({
 children,
 ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
 // `nonce` is forwarded so next-themes' inline FOUC-prevention script
 // can be nonced and pass strict CSP. The Server Component reads it
 // from x-nonce in app/layout.tsx and passes it through here.
 return (
 <NextThemesProvider
 attribute="class"
 defaultTheme="light"
 enableSystem={false}
 disableTransitionOnChange
 {...props}
 >
 <ThemeHotkey />
 {children}
 </NextThemesProvider>
 )
}

function isTypingTarget(target: EventTarget | null) {
 if (!(target instanceof HTMLElement)) {
 return false
 }

 return (
 target.isContentEditable ||
 target.tagName ==="INPUT"||
 target.tagName ==="TEXTAREA"||
 target.tagName ==="SELECT"
 )
}

function ThemeHotkey() {
 const { resolvedTheme, setTheme } = useTheme()

 React.useEffect(() => {
 function onKeyDown(event: KeyboardEvent) {
 if (event.defaultPrevented || event.repeat) {
 return
 }

 if (event.metaKey || event.ctrlKey || event.altKey) {
 return
 }

 if (!event.key || event.key.toLowerCase() !=="d") {
 return
 }

 if (isTypingTarget(event.target)) {
 return
 }

 setTheme(resolvedTheme ==="dark"?"light":"dark")
 }

 window.addEventListener("keydown", onKeyDown)

 return () => {
 window.removeEventListener("keydown", onKeyDown)
 }
 }, [resolvedTheme, setTheme])

 return null
}

export { ThemeProvider }