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 thunk from 'redux-thunk';
import { useEffect, useState } from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider, connect } 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()
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,
      //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 ProfileWindow = ({user, onLogout}) => {
  let [userInfo, setUserInfo] = useState(user.payload)

  useEffect(()=> {
    setUserInfo(user.payload)
  },[user, userInfo])

  return(
    <section>
      <div
        style={{ border: '1px solid black', backgroundColor: 'red', color: 'white' }}
        onClick={() => { onLogout(); history.push('/login') }}
      >log-out[X]</div>
      <div style={{border:'1px solid chartreuse'}}>
        <h3>{userInfo?.login || 'user'}</h3>         
        <img 
          width={100} 
          height={100}  
          style={{ border: '1px solid black', display:'block', margin:'5% auto', marginBottom:'2px'}}
          src={ userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
          alt='avatar' 
        />
        <small>change avavtar</small>
      </div>
      <Link
        to={`/player/tracks/:${userInfo?._id}`} 
        style={{
          display:'block', 
          backgroundColor: 'purple', 
          color: 'white', 
          margin: '5px', 
          padding:'5px'
        }} 
      >My tracks</Link>
    </section>
   )
}
const ProfileWindowConnect = connect(state => ({ user: state.promise.userData || {} }),{ onLogout: action.actionAuthLogout })(ProfileWindow)
  

const Player = () => 
  <>
    <header>Player</header>
    <div style={{ display: 'flex' }}>
      <aside style={{ border: '1px solid black', width: '30%' }}>
        <ProfileWindowConnect />
        <Sidebar.PlaylistsConnect />
      </aside>
      <main style={{ border: '1px solid black', width: '80%' }}>
        <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>To create playlist: </strong>click "NEW PLAYLIST"</li>
                <li><strong>To upload track: </strong>drag and drop it to playlist area</li>
                <li><strong>To see list of all your tracks: </strong>click "My tracks"</li>
              </ul>
            </div>
          </>
        </Switch>
      </main>
    </div>
    <footer> back stop forw</footer>
  </>

// const PlayerConnect = connect(
//   state => ({ user: state.promise.userData || {} }),{ onLogout: action.actionAuthLogout}
// )(Player)


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;