import React, { useState, useEffect } from "react";

import _auth from '@netuno/auth-client';

import { Layout, Menu } from 'antd';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import Home from './pages/Home';
import Login from './pages/Login';
import Register from './pages/Register';
import Main from './pages/Main';
import Communities from './pages/Communities';

import logo from './logo.svg';
import './App.less';

const { Header, Footer, Content } = Layout;

export default () => {
  let menuItems = null;
  if (_auth.isLogged()) {
    menuItems = <>
      <Menu.Item><Link to="/main">Principal</Link></Menu.Item>
      <Menu.Item><Link to="/communities">Comunidades</Link></Menu.Item>
    </>;
  } else {
    menuItems = <>
      <Menu.Item><Link to="/">Home</Link></Menu.Item>
      <Menu.Item><Link to="/login">Login</Link></Menu.Item>
      <Menu.Item><Link to="/register">Register</Link></Menu.Item>
    </>;
  }
  return (
    <Router>
      <Layout>
        <Header>
          <Menu mode="horizontal" theme="dark">
            {menuItems}
          </Menu>
        </Header>
        <Content>
          <Switch>
            <Route path="/login">
              <Login/>
            </Route>
            <Route path="/register">
              <Register/>
            </Route>
            <Route path="/main">
              <Main/>
            </Route>
            <Route path="/communities">
              <Communities/>
            </Route>
            <Route path="/">
              <Home/>
            </Route>
          </Switch>
        </Content>
        <Footer>
          <h2>Plataforma Social</h2>
          Desenvolvimento de demonstração.
        </Footer>
      </Layout>
    </Router>
  );
};
