import {useState} from 'react';
import logo from './logo.svg';
import './App.scss';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";

const Logo = () =>
<img src={logo} className="Logo"/>

const defaultMenuItems = [
    {title: 'Home', to: '/'},
    {title: 'About', to: '/about'},
    {title: 'Login', to: '/login'},
    {title: 'Logout', to: '/logout'},
    {title: '2 + 2', to: '/add/2/2'},
    {title: '20 + 200', to: '/add/20/200'},
]

const MenuItem = ({title, to}) => 
<li>
    <Link to={to}>{title}</Link>
</li>

const Menu = ({menuItems=defaultMenuItems}) =>
<nav>
    <ul>
        {menuItems.map(item => <MenuItem {...item} />)}
    </ul>
</nav>

const Header = () =>
<header>
    <Logo />
    <Menu />
</header>

const Footer = () =>
<footer>
    <Logo />
    <Route path='/' exact> 
        вариация футера на главной
    </Route>
</footer>

const Login = () => {
    const [login, setLogin]       = useState('')
    const [password, setPassword] = useState('')
    return (
        <div className="Login">
            <input type='text' 
                   onChange={e => setLogin(e.target.value)} 
                   value={login} /> 
            <input type='password' 
                   onChange={e => setPassword(e.target.value)} 
                   value={password} />
            <button disabled={!login || !password}>Login...</button>
        </div>
    )
}

const Home   = () =>
<div className="Home">
    <h1>
        Главная нашего супер-пупер сайта
    </h1>
</div>

const About   = () =>
<div className="About">
    <h1>
        О нас
    </h1>
    <p>
        тили тили трали вали
        <img src={logo}/>
    </p>
</div>


const Add = ({match:{params: {a,b}}}) =>
<pre>
    {a} + {b} = {+a + +b}
</pre>

const Main = () =>
<main>
    <Route path='/' component={Home} exact/>
    <Route path='/about' component={About} exact/>
    <Route path='/login' component={Login} exact/>
    <Route path='/add/:a/:b' component={Add} exact/>
</main>


const App = () => 
<Router history={createHistory()}>
    <Header />
    <Main />
    <Footer />
</Router>

export default App;