import './App.css';
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 { Link, 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')

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 PlayerBar = () => {
  return (
    <footer>
      <div>
        <button>{`<<`}</button>
        <button>{`> / ||`}</button>
        <button>{`>>`}</button>
        <input type="range" />
      </div>
      <small>ARTIST - TRACK NAME</small>
    </footer>
  )
}

const Player = () =>
  <div>
    <header><Link to="/player">Player</Link></header>
    <div style={{ border:'1px solid blue',display: 'flex', height: '89vh', minHeight: '60vh', overflow:'none'}}>
      <aside style={{width: '30%', overflow:'auto'}}>
        <Sidebar.LogoutBtnConnect />
        <Sidebar.ProfileWindowDropzoneConnect />
        <Sidebar.UserTracksBtnConnect />
        <Sidebar.PlaylistAddConnect />
        <Sidebar.PlaylistsConnect />
      </aside>
      <main style={{ border: '1px solid red', width: '80%', height:'100%', overflow:'auto'}}>
        <Switch>
          <Route path="/player/playlist/:_id" component={Page.PlaylistPageConnect} exact />
          <Route path="/player/tracks/:_id" component={Page.UserTracksPageConnect} exact />
          <>
            <h2>Welcome to online Player!</h2>
            <div style={{ width: '50%', margin: '0 auto' }}>
              <ul style={{ textAlign: 'start' }}>
                <li><strong>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>
                <li><strong>Click "MY TRACKS" - </strong><small>To see all of your uploaded tracks.</small></li>
              </ul>
            </div>
          </>
        </Switch>
      </main>
    </div>
    {/* <PlayerbarConnect /> */}
    <PlayerBar />
  </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;