import {BrowserRouter, Switch, Route} from "react-router-dom";
import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';

import './styles/reset.css';
import './styles/main.scss';
import './styles/grid.scss';
import './styles/tabs.scss';

import {Nav} from "./components/Nav";
import {SearchBar} from "./components/SearchBar";

import {Search} from './views/Search';
import {ArtistView} from "./views/Artist";
import {DiscView} from "./views/Disc";
import {ReleaseView} from "./views/Release";
import {Recomended} from "./views/Recomended";
import {SongView} from "./views/Song";

const Main = (props) => {
    const navigate = (query) => props.history.push(`/search?query=${query}`);

    return (
        <Fragment>
            <h1>Busca la musica que te gusta!</h1>
            <SearchBar history={props.history} onQueryChanged={navigate}/>
            <Recomended/>
        </Fragment>
    )
}

const NoRoute = (props) => {
    return (
        <div>
            <h1>Esa pagina no existe</h1>
            <button className='link' onClick={() => props.history.goBack()}>Volver</button>
        </div>
    );
}

const App = () => (
    <main>
        <BrowserRouter>
            <Nav/>
            <Switch>
                <Route path='/search/:who?' component={Search}/>
                <Route path='/artist/:mbid?' component={ArtistView}/>
                <Route path='/disc/:mbid?' component={DiscView}/>
                <Route path='/release/:mbid?' component={ReleaseView}/>
                <Route path='/song/:mbid?' component={SongView}/>
                <Route exact path='/' component={Main}/>
                <Route path='*' component={NoRoute}/>
            </Switch>
        </BrowserRouter>
    </main>
);

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);