import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import * as base64 from "base-64";
import { Client } from "jmap-client-ts";
import { FetchTransport } from "jmap-client-ts/lib/utils/fetch-transport";

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

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

interface IAppState {
	auth: IAuth;
	client: Client | null;
}

const App = () => {
	const [state, setInternalState] = useState<IAppState>({
		auth: { email: "", password: "" },
		client: null,
	});

	// When the user provides credentials
	const onLogin = (email: string, password: string) => {
		// Store the provided credentials for now
		state.auth.email = email;
		state.auth.password = password;
		state.client = null;
		setInternalState(state);
		localStorage.setItem("auth", JSON.stringify(state.auth));
		doLogin(state.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";
		const basic_auth =
			"Basic " + base64.encode(auth.email + ":" + auth.password);

		state.client = new Client({
			accessToken: "fake token",
			httpHeaders: { Authorization: basic_auth },
			sessionUrl: well_known_url,
			transport: new FetchTransport(fetch.bind(window)),
		});

		state.client
			.fetchSession()
			.then((response) => console.log(response))
			.catch((error) => console.error(error));

		return;
	};

	const loadAuth = () => {
		const data = localStorage.getItem("auth");
		if (!data) return;
		const auth = JSON.parse(data);
		state.auth = auth;
		if (state.client == null) {
			console.log("NULL STATE.client");
			doLogin(state.auth);
			return;
		}
	};

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

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

export default App;