import * as React from "react";
import { tokens, makeStyles } from "@fluentui/react-components";


const useStyles = makeStyles({
  welcome__header: {
	display: "flex",
	flexDirection: "column",
	alignItems: "center",
	"justify-content": "center",
	height: "90px",
	backgroundColor: tokens.colorNeutralBackground3,
  },
  message: {
	fontSize: tokens.fontSizeHero900,
	fontWeight: tokens.fontWeightRegular,
	fontColor: tokens.colorNeutralBackgroundStatic,
  },
});

const Header: React.FC = () => {
	const [hidden, setHidden] = React.useState(false);
	const styles = useStyles();

	const hideFirstTimePopup = () => {
		setHidden(true);
		localStorage.setItem('firstTimePopUpShown', 'true');
	};

	React.useEffect(() => {
		const shown = localStorage.getItem('firstTimePopUpShown');
		if (shown) setHidden(true);
	}, []);

	return (
	<div>
		<div id="firstTimePopup" className="popup" hidden={hidden} >
			<div className="popup-content">
			<span className="close" onClick={hideFirstTimePopup}>&times;</span>
				<p>Welcome to the Businessmap Add-In! Streamline your project management by creating task cards directly
					from your Outlook emails with our powerful Office Add-in. This tool offers two key features to enhance
					your workflow:</p>
				<p><b>Add Card (default board)</b>: Quickly convert emails into task cards on a predefined board. This
					feature allows you to create a card in a selected board, workflow, column, and lane set up during
					installation. You can also assign a default owner, ensuring consistent task management and reducing
					setup time.</p>
				<p><b>Add Card (custom board)</b>: For more detailed management, customize card creation by specifying the
					board, workflow, column, lane, and owner. This flexibility is ideal for handling multiple projects or
					assigning tasks to different team members directly from your emails.</p>
				<p><b>New to Businessmap?</b> <a href="https://businessmap.io" rel="noopener noreferrer" className="mbLink"
						target="_blank">Sign up now</a> to start managing your projects more effectively.</p>
				<div className="center">
					<button type="button" onClick={hideFirstTimePopup}>Close</button>
				</div>
			</div>
		</div>
	</div>
	);
};

export default Header;