import './App.scss';
import * as action from './actions'
import * as reducer from './reducers'
import * as Logcomp from './components/Login'
import * as Sidebar from './components/Sidebar'
import * as Page from './components/Page'
import { PlayerbarConnect } from './components/Playerbar'

import thunk from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { Route, Router, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'

export function jwtDecode(token) {
  try {
    let decoded = token.split('.')
    decoded = decoded[1]
    decoded = atob(decoded)
    decoded = JSON.parse(decoded)
    return decoded
  }
  catch (e) {
    return;
  }
}

export const getGQL = url =>
  (query, variables = {}) =>
    fetch(url, {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
        ...(localStorage.authToken ? { "Authorization": "Bearer " + localStorage.authToken } : {})
      },
      body: JSON.stringify({ query, variables })
    })
      .then(res => res.json())
      .then(data => {
        if (data.errors && !data.data) throw new Error(JSON.stringify(data.errors))
        return data.data[Object.keys(data.data)[0]]
      })

export const history = createHistory()
export const backendURL = "http://player.asmer.fs.a-level.com.ua"
export const gql = getGQL(backendURL + '/graphql')

export const store = createStore(
  combineReducers(
    {
      promise: reducer.promiseReducer,
      auth: reducer.authReducer,
      player: reducer.playerReducer
      //local: localStoreReducer(promiseReducer, 'locale')
    }
  ), applyMiddleware(thunk)
)
store.subscribe(() => console.log(store.getState()))
//works only once on start of page
if (store.getState().auth?.token) {
  history.push('/player')
  store.dispatch(action.actionGetUserData())
  store.dispatch(action.actionGetUserPlaylists())
} else {
  history.push('/login')
}

const GreetPg = () =>
  <>
    <h2>Welcome to online Player!</h2>
    <div className='startpage__ulwrapper'>
      <ul>
        <li>
          <strong className='highlightYellow'>Click "UPLOADS" - </strong>
          <small>To see all of your uploaded tracks.</small>
        </li>
        <li>
          <strong className='highlightGreen'>Click "NEW PLAYLIST" - </strong>
          <small>To create new playlist.</small>
        </li>
        <li>
          <strong>Drag 'n' drop track to playlist area - </strong>
          <small>To upload the track and add it to current playlist.</small>
        </li>
        <li>
          <strong>Drag a track within playlist - </strong>
          <small>To chage the order of playlist tracks.</small>
        </li>
      </ul>
    </div>
  </>

const Player = () =>
  <div>
    <div className='page'>
      <aside className='sidebar' >
        <Sidebar.LogoutBtnConnect />
        <Sidebar.ProfileWindowDropzoneConnect />
        <Sidebar.UserTracksBtnConnect />
        <Sidebar.PlaylistAddConnect />
        <Sidebar.PlaylistsConnect />
      </aside>
      <main className='page__window'>
        <Switch>
          <Route path="/player/playlist/:_id" component={Page.PlaylistPageConnect} exact />
          <Route path="/player/tracks/:_id" component={Page.UserTracksPageConnect} exact />
          <GreetPg />
        </Switch>
      </main>
    </div>
    <PlayerbarConnect />
  </div>

function App() {
  return (
    <Router history={history}>
      <Provider store={store}>
        <div className="App">
          <Switch>
            <Route path="/login" component={Logcomp.LoginFormConnect} exact />
            <Route path="/registration" component={Logcomp.RegisterFormConnect} exact />
            <Route path="/player" component={Player} />
          </Switch>
        </div>
      </Provider>
    </Router>
  );
}

export default App;