import React, { Suspense, useEffect } from 'react'
import { useRoutes, useNavigate } from 'react-router-dom'
import routes from './router'
import { useAppSelector, useAppDispatch, shallowEqualApp } from './store'
import { changeMessage } from './store/modules/counter'
import EventBus from '@/utils/events'
import AppLoading from './components/appLoading'

function App() {
  const { counter } = useAppSelector((state) => state, shallowEqualApp)
  const navigate = useNavigate()
  const dispatch = useAppDispatch()

  useEffect(() => {
    EventBus.on('notLogin', function () {
      navigate('/login')
    })
  }, [])

  function changeMessageHandler() {
    dispatch(changeMessage('hahah'))
  }

  const loginState: boolean = Boolean(localStorage.getItem('token'))

  return (
    <>
      <Suspense fallback={<AppLoading />}>
        <div className="App">{useRoutes(routes)}</div>
      </Suspense>

      {/* <div>当前计数{counter.count}</div>
      <div>message: {counter.message}</div>
      <button onClick={changeMessageHandler}>修改message</button> */}
    </>
  )
}

export default App