import React, { useEffect, useState } from 'react'
import { observer } from 'mobx-react';
import './index.less'
// import { login } from './api/api.js'
// import store from './store/index.js'
import Modal from './modal/modal.jsx'
import store from './store/index.js'
import modalStore from './store/modal.js'
import HomePage from './pages/homePage/homePage.jsx'
import PrizePage from './pages/prizePage/prizePage.jsx'
import FuturePage from './pages/futurePage/futurePage.jsx'
import { PAGE_MAP } from './utils/constants.js'


const pageMap = {
  [PAGE_MAP.HOME_PAGE]: <HomePage />,
  [PAGE_MAP.PRIZE_PAGE]: <PrizePage />,
  [PAGE_MAP.FUTURE_PAGE]: <FuturePage />,
};

@observer
class App extends React.Component {
  // const [count, setCount] = useState(0)

  state = {
  }

  async componentDidMount() {


  }




  render() {
    const { curPage, pageData } = store;

    return (
      <>
        {{ ...pageMap[curPage], props: { ...pageData } }}
        <Modal />
      </>

    )
  }


}

export default App
