import React, { useState, useEffect } from 'react';
import { fetchLoginStatus } from './services';
import Nav from './Nav';
import Login from './Login';
import SendMessage from './SendMessage';
import RefreshUsers from './RefreshUsers';
import RefreshMessages from './RefreshMessages';
import './app.css';

const App = () => {
  const [userState, setUserState] = useState({ isLoggedIn: false });
  //const [currentMessages, setCurrentMessages] = useState({ currentMessages: [] });

  // Runs when first rendered
  // AND whenever any vars in the passed array change
  // (None in this case)
  useEffect(() => {
    fetchLoginStatus()
      .then(userInfo => {
        setUserState({
          isLoggedIn: true,
          username: userInfo.username
        });
      });
  }, []);

  const login = (username) => {
    setUserState({
      isLoggedIn: true,
      username
    });
  };

  const logout = () => {
    setUserState({
      isLoggedIn: false
    });
  };

  const processUserState = (loggedInState, messages) => {
    console.log("before Process User state: send message");
    console.log(messages);
    console.log("length");
    console.log(messages.length);
    setUserState({
      username: userState.username,
      isLoggedIn: loggedInState,
      currentMessages: [],
      currentMessages: messages
    });


    console.log("Process User state: send message");
    console.log(messages);
    console.log("length");
    console.log(messages.length);
    /*
    setCurrentMessages(
      {
        currentMessages: messages,
      }
    );*/

    console.log('Current messages are');
    console.log(userState);
  };

  let content;

  if (userState.isLoggedIn) {
    content = <>< SendMessage onMessage={processUserState} />
      < RefreshMessages user={userState} />
    </>;
  } else {
    content = <Login onLogin={login} />;
  }

  return (
    <div className="app">
      <Nav user={userState} onLogout={logout} />
      {content}
    </div>
  );
};

export default App;