import "./App.css";
import 'bootstrap/dist/css/bootstrap.min.css';

//import MailboxList from "./Mailbox";
import AuthModal from "./AuthModal";
import React, { useEffect, useState } from "react"


interface IAuth {
  password: string;
  username: string;
}

const App = () => {
  const [state, setInternalState] = useState<IAuth|null>(null)

  const fetchUserData = () => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        return response.json()
      })
      .then(data => {
        //setUsers(data)
      })
  }

  const loadAuth = () => {
    const auth = localStorage.getItem("auth")
    if (!auth) return;
    setInternalState(JSON.parse(auth))
  }

  const setState = (auth: IAuth) => {
    localStorage.setItem("auth", JSON.stringify(auth))
  }

  useEffect(() => {
    loadAuth()
    //fetchUserData()
  }, [])

  return (
    <div className="App">
      {state ? 
        <p>{state.username}</p> :
	<AuthModal></AuthModal>}
    </div>
  );
}

export default App;