import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import * as base64 from "base-64";

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

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

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

	// When the user provides credentials
	const onLogin = (email: string, password: string) => {
		// Store the provided credentials for now
		const auth = {email: email, password: password}
		setInternalState(auth);
		localStorage.setItem("auth", JSON.stringify(auth));
		doLogin(auth);
	};

	// Make the request to get system metadata
	const doLogin = (auth: IAuth) => {
		const domain = auth.email.split("@")[1];
		const well_known_url = "https://" + domain + "/.well-known/jmap"
		let headers = new Headers();
		headers.append("Authorization", "Basic " + base64.encode(auth.email + ":" + auth.password));
		fetch(well_known_url, {
			method: "GET",
			headers: headers,
		})
			.then(response => response.json())
			.then(data => console.log(data))
			.catch(error => console.error(error));
	};

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

	useEffect(() => {
		loadAuth();
	}, []);

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

export default App;