import * as React from "react";
import Header from "../components/Header";
import { makeStyles } from "@fluentui/react-components";
import { LoginButton } from "../components/loginButton";
import "../style.css";
import { BsmapLogin } from "../components/bsmapLogin";
import { BsmapForm } from "../components/bsmapForm";

const useStyles = makeStyles({
  root: {
	minHeight: "100vh",
  },
});

const App: React.FC = () => {
	const styles = useStyles();

	const [msLoginGotten, setMsLoginGotten] = React.useState(false);
	const [bsmapLoginGotten, setBsmapLoginGotten] = React.useState(false);

	const handleMsLoginFinished = () => {
		setMsLoginGotten(true);
	};

	const handleBsmapLoginFinished = () => {
		setBsmapLoginGotten(true);
	};

	return (
		<div className={styles.root}>
			<Header />
			<LoginButton onGet={handleMsLoginFinished} />
			<BsmapLogin onGet={handleBsmapLoginFinished} />
			{bsmapLoginGotten && msLoginGotten && 
				<BsmapForm 
					submitType="createCard" 
				/>
			}
		</div>
	);
};

export default App;