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

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

import {StateProvider} from "./services/State";

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

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";
import {Grid, RowCol} from './components/Grid';
import {AuthCallback, AuthLogin, AuthLogout} from "./components/Auth";

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

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

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

const App = () => (
    <main>
        <BrowserRouter>
            <ScrollToTopRouter/>
            <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='/login' component={AuthLogin}/>
                <Route exact path='/logout' component={AuthLogout}/>
                <Route exact path='/auth_callback' component={AuthCallback}/>

                <Route exact path='/' component={Main}/>
                <Route path='*' component={NoRoute}/>
            </Switch>
        </BrowserRouter>
    </main>
);

const AppWithState = () => {
    return (
        <StateProvider>
            <App/>
        </StateProvider>
    );
}

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