'use client'

import PropTypes from 'prop-types'
import {experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript} from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

import {grey, green, red, yellow} from '@mui/material/colors'

import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'
import '../styles/nprogress.css'

import PlausibleProvider from 'next-plausible'
import ChanjeTem from '../components/chanje-tem'
import NextAppDirEmotionCacheProvider from './emotion-cache-provider'

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: green,
        secondary: red,
        divider: green[200],
        info: {
          main: grey[900]
        },
        text: {
          primary: grey[900],
          secondary: grey[800],
        },
      }
    },
    dark: {
      palette: {
        primary: {
          main: yellow[500],
          contrastText: '#000'
        },
        secondary: red,
        info: {
          main: '#fff'
        },
        divider: green[700],
        background: {
          default: '#082211',
          paper: '#082211'
        },
        text: {
          primary: '#fff',
          secondary: grey[100]
        }
      }
    }
  }
})

export default function ThemeRegistry(props) {
  const {children} = props

  return (
    <>
      {getInitColorSchemeScript()}
      <PlausibleProvider domain='oki.re'>
        <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
          <CssVarsProvider theme={theme}>
            <CssBaseline enableColorScheme />
            <ChanjeTem />
            {children}
          </CssVarsProvider>
        </NextAppDirEmotionCacheProvider>
      </PlausibleProvider>
    </>
  )
}

ThemeRegistry.propTypes = {
  children: PropTypes.node.isRequired
}