import { useUserContext } from '../contexts/UserContext'
import { Route, Switch } from 'react-router'
import { Link } from 'react-router-dom'
import { Dashboard } from './pages/Dashboard'
import { UserForm } from './components/UserForm'
import { TransactionList } from './components/TransactionList'
import { AccountForm } from './components/AccountForm'
import { Login } from './components/Login'
import { AppHeader } from './layout/AppHeader'
import { AppFooter } from './layout/AppFooter'

export const CoreLayout = () => {
  const { user, selectedAccount } = useUserContext()

  if (!user) return <Login />

  return (
    <div className="app">
      <AppHeader>
        <Link to="/">Home</Link>
        <Link to="/select">Select Budget</Link>
        <Link to="/account">Budget Details</Link>
        <Link to="/details">Transactions</Link>
        <Link to="/user">Profile</Link>
      </AppHeader>

      <Switch>
        <Route path="/user" component={UserForm} />
        <Route path="/details" component={TransactionList} />
        <Route path="/account/new" component={AccountForm} />
        <Route path="/account" component={AccountForm} />
        <Route path="/" component={Dashboard} />
      </Switch>

      <AppFooter />
      {/* {showingModal && <TransactionModal account={account} />} */}
    </div>
  )
}