import { useComputedColorScheme } from '@tidbcloud/uikit'
import { useEffect } from 'react'

import 'metrics-chart/dist/theme/light_theme.css'
import 'metrics-chart/dist/theme/dark_theme.css'

const LIGHT_TOKEN = 'metrics-chart-light'
const DARK_TOKEN = 'metrics-chart-dark'

export const DynamicEchTheme: React.FC<React.PropsWithChildren<unknown>> = ({
  children
}) => {
  const colorScheme = useComputedColorScheme()
  useEffect(() => {
    if (colorScheme === 'light') {
      window.document.body.classList.remove(DARK_TOKEN)
      window.document.body.classList.add(LIGHT_TOKEN)
    } else {
      window.document.body.classList.remove(LIGHT_TOKEN)
      window.document.body.classList.add(DARK_TOKEN)
    }
  }, [colorScheme])
  return <>{children}</>
}