import {useEffect, useMemo, useState} from 'react'
import {useRouter} from 'next/router'
import PropTypes from 'prop-types'
import {createTheme, ThemeProvider} from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import {Provider, useSession} from 'next-auth/client'
import {CacheProvider} from '@emotion/react'
import {grey, green, red} from '@mui/material/colors'
import createEmotionCache from '../lib/create-emotion-cache'

import SwitchTheme from '../components/switch-theme'

const getDesignTokens = mode => ({
  palette: {
    mode,
    ...(mode === 'light'
      ? {
        // Palette values for light mode
        primary: green,
        secondary: red,
        divider: green[200],
        text: {
          primary: grey[900],
          secondary: grey[800],
        },
      }
      : {
        // Palette values for dark mode
        primary: green,
        secondary: red,
        divider: green[700],
        background: {
          default: '#082211',
          paper: '#082211',
        },
        text: {
          primary: '#fff',
          secondary: grey[100],
        },
      }),
  },
})

const clientSideEmotionCache = createEmotionCache()

export default function MyApp(props) {
  const {Component, emotionCache = clientSideEmotionCache, pageProps} = props
  const [mode, setMode] = useState('light')
  const [switchFixed, setSwitchFixed] = useState(false)
  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])

  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side')
    if (jssStyles) {
      jssStyles.remove()
    }
  }, [])

  useEffect(() => {
    if (props.router.pathname.slice(0, 5) === '/teks') {
      setSwitchFixed(true)
    } else {
      setSwitchFixed(false)
    }
  }, [props])

  useEffect(() => {
    const oldLocalMode = localStorage.getItem('oki-dark')
    const localMode = localStorage.getItem('oki-theme')
    if (localMode === 'dark' || (oldLocalMode && oldLocalMode === 'true')) {
      setMode('dark')
    } else {
      setMode('light')
    }

    if (localMode && oldLocalMode) {
      localStorage.removeItem('oki-dark')
    }
  }, [])

  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Provider session={pageProps.session}>
          <SwitchTheme switchFixed={switchFixed} mode={mode} setMode={setMode} />
          {Component.auth ? (
            <Auth><Component {...pageProps} /></Auth>
          ) : (
            <Component {...pageProps} />
          )}
        </Provider>
      </ThemeProvider>
    </CacheProvider>
  )
}

function Auth({children}) {
  const [session, loading] = useSession()
  const isUser = Boolean(session?.user)
  const router = useRouter()
  useEffect(() => {
    if (loading) {
      return
    }

    if (!isUser) {
      router.push('/soumet')
    }
  }, [isUser, loading, router])

  if (isUser) {
    return children
  }

  return (
    <div>Loading...</div>
  )
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
  emotionCache: PropTypes.object,
  router: PropTypes.object.isRequired
}

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