import './App.css';
import React, { useState, useEffect } from 'react';
import MenuBar from './components/MenuBar';
import Login from './components/Login';
import Gamenights from './components/Gamenights';
import Gamenight from './components/Gamenight';
import AdminPanel from './components/AdminPanel';

import { get_gamenights, get_games, unpack_api_result, login } from './api/Api';

const localStorageUserKey = 'user';

function App() {
  const [user, setUser] = useState(null);
  const [gamenights, setGamenights] = useState([]);
  const [flashData, setFlashData] = useState({});
  const [games, setGames] = useState([]);
  const [activeGamenightId, setActiveGamenightId] = useState(null);
  const [appState, setAppState] = useState('LoggedOut')

  const handleLogin = (input) => {
    unpack_api_result(login(input), setFlashData)
      .then(result => {
        setUser(result.user);
        localStorage.setItem(localStorageUserKey, JSON.stringify(result.user));
      })
      .then(() => setAppState('LoggedIn'))
  };

  useEffect(() => {
    if(activeGamenightId !== null) {
      setAppState('GamenightDetails');
    } else {
      setAppState('LoggedIn')
    }
    
  }, [activeGamenightId])

  const onLogout = () => {
    setUser(null);
    localStorage.removeItem(localStorageUserKey);
    setAppState('LoggedOut')
  };

  const onAdmin = () => {
    setAppState('AdminPanel')
  }

  const onUser = () => {
    setAppState('UserPage')
  }

  const onReset = () => {
    setAppState('LoggedIn')
  }

  const setFlash = (data) => {
    setFlashData(data);
  };

  const refetchGamenights = () => {
    setUser({...user});
  };

  useEffect(() => {
    if (appState === 'LoggedIn') {
      unpack_api_result(get_gamenights(user.jwt), setFlashData)
        .then(result => setGamenights(result.gamenights));
    }
  }, [appState])

  useEffect(() => {
    if (appState === 'LoggedIn') {
      unpack_api_result(get_games(user.jwt), setFlashData)
        .then(result => setGames(result.games));
    }        
  }, [appState])

  useEffect(() => {
    setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
  }, []);

  let mainview;
  if(appState === 'LoggedOut') {
    return (
      <div className="App">
        <Login onChange={handleLogin}/>
      </div>
    );
  } else if(appState === 'GamenightDetails') {
    mainview = (
    <Gamenight
      gamenightId={activeGamenightId}
      onDismis={() => setActiveGamenightId(null)}
      setFlash={setFlash}
      user={user}
    />)
  } else if(appState === 'LoggedIn') {
    mainview = (
      <Gamenights 
        user={user}
        games={games}
        setFlash={setFlash}
        refetchGamenights={refetchGamenights}
        gamenights={gamenights}
        onSelectGamenight={(g) => setActiveGamenightId(g.id)}/>
    );
  } else if(appState === 'AdminPanel') {
    mainview = (
      <AdminPanel
        user={user}
        setFlash={setFlash}/>
    );
  }
  let page = (
    <>
      <MenuBar
        user={user}
        onUser={onUser}
        onAdmin={onAdmin}
        onLogout={onLogout}
        onReset={onReset}/>
      {mainview}
    </>
  );

  return page;
}

export default App;