import {Redirect, Switch} from 'react-router-dom';
import {HelloPage, UserTracks} from "./user-tracks";
import {CMyPlaylists} from "./my-tracks";
import {CProtectedRoute} from "../reducers";
import {CSearchResult} from "./tools/search";
import {HelloUserPage,MyPlaylistTracks} from "./my-tracks";
import {CUserPlaylists} from "./user-tracks/user-playlists";
import {UserPlaylistTracks} from "./user-tracks";
import music from '../music.png'

export const MusicImage = () =>
    <img className='musicImage' src={music} alt='music'/>


export const Aside = ({children}) =>
    <div className='Aside'>
        {children}
    </div>

export const Content = ({children}) =>
    <div className='Content'>
        {children}
    </div>

export const Main = () =>
    <main>
        <Aside>
            <Switch>
                <CProtectedRoute roles={["anon", "user"]} path='/' component={MusicImage} exact/>
            <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={CUserPlaylists}/>
            <CProtectedRoute roles={["anon", "user"]} path="/userPlaylist/:_id" component={CUserPlaylists}/>
            <CProtectedRoute roles={["anon", "user"]} path="/myMusic" component={CMyPlaylists}/>
            <CProtectedRoute roles={["anon", "user"]} path="/myPlaylist/:_id" component={CMyPlaylists}/>
                <CProtectedRoute roles={["anon", "user"]} path="/music" component={MusicImage}/>
                <CProtectedRoute roles={["anon", "user"]} path="/search" component={MusicImage}/>
            </Switch>
        </Aside>
        <Content>
            <Redirect from='/main' to='/'/>
            <Switch>
                <CProtectedRoute roles={["anon", "user"]} path="/search" component={CSearchResult}/>
                <CProtectedRoute roles={["anon", "user"]} path="/myPlaylist/:_id" component={MyPlaylistTracks}/>
                <CProtectedRoute roles={["anon", "user"]} path="/userPlaylist/:_id" component={UserPlaylistTracks}/>
                <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={HelloPage}/>
                <CProtectedRoute roles={["anon", "user"]} path="/music" component={HelloPage}/>
                <CProtectedRoute roles={["anon", "user"]} path='/' component={HelloPage} exact/>
                <CProtectedRoute roles={["anon", "user"]} path='/myMusic' component={HelloUserPage}/>
            </Switch>
        </Content>
   </main>