import { Button, makeStyles, tokens } from "@fluentui/react-components";
import React, { useEffect } from "react";
import { getValidToken, requiresNewToken } from "../auth/auth";

const useStyles = makeStyles({
  instructions: {
	fontWeight: tokens.fontWeightSemibold,
	marginTop: "20px",
	marginBottom: "10px",
  },
  textPromptAndInsertion: {
	display: "flex",
	flexDirection: "column",
	alignItems: "center",
  },
  textAreaField: {
	marginLeft: "20px",
	marginTop: "30px",
	marginBottom: "20px",
	marginRight: "20px",
	maxWidth: "50%",
  },
});

export const LoginButton: React.FC<{ onGet?: () => void }> = (props) => {
	const styles = useStyles();
	
	const [hidden, setHidden] = React.useState(false);

	useEffect(() => {
		// If we already have the required data execute onGet.
		if (!requiresNewToken()) {
			setHidden(true);
			props.onGet();
		}
	}, []);

	const logToken = async () => {
		// Just makes sense to prompt the user at start.
		await getValidToken();
		
		setHidden(true);
		if (props.onGet) {
			props.onGet();
		}
	};

	return (
		<div id="azureLoginContainer" hidden={hidden}>
			<div className="messageBar">
				<div className="messageBar-content">
					<div className="messageBar-icon">
						<i>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
								className="bi bi-info-circle" viewBox="0 0 16 16">
								<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
								<path
									d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
							</svg>
						</i>
					</div>
					<div id="bannerText" className="messageBar-text">
						Press Login to sign in and authorize the app. This step is required to enable the features you’ll use inside Businessmap Outlook add-in.
					</div>
				</div>
			</div>
			<div className={styles.textPromptAndInsertion} >
				<Button appearance="primary" disabled={false} size="large" onClick={logToken}>
					LogIn
				</Button>
			</div>
		</div>
	);
}