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 { createCommentOnCard } from "../handlers/phpApiHandler";
import { showUIMessage } from "../utils/outlookUtils";
import { ActionButton } from "../components/actionButton";

const useStyles = makeStyles({
  root: {
	minHeight: "100vh",
  },
  topSpace: {
	paddingTop: "1rem",
	textAlign: "center"
  }
});

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

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

	const [cardId, setCardId] = React.useState(0);

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

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

	const createCommentSubmit = async () => {
		if (cardId > 0){
			const commentId = await createCommentOnCard(cardId);
			showUIMessage(`Comment with id (${commentId}) successfully created on Businessmap card.`);
		}
	};

	return (
		<div className={styles.root}>
			<Header/>
			<LoginButton onGet={handleMsLoginFinished} />
			<BsmapLogin onGet={handleBsmapLoginFinished} />
			{bsmapLoginGotten && msLoginGotten && <div id="set" className="mainContainer">
				<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">
						Enter the internal Card ID from Businessmap. Your email will be added as a comment to this card.
					</div>
				</div>
			</div>
				<div className="inputWithIcon">
					<label className="fLabel" htmlFor="cardId">Card Id</label>
					<i>
						<svg viewBox="4 2 20 20" height="20" width="20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
							<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
							<g id="SVGRepo_iconCarrier"> 
								<path d="M11 8L16 8.00053M11 12L16 12.0005M11 16L16 16.0005M8 16H8.01M8 12H8.01M8 8H8.01M7.2 4H16.8C17.9201 4 18.4802 4 18.908 4.21799C19.2843 4.40973 19.5903 4.71569 19.782 5.09202C20 5.51984 20 6.0799 20 7.2V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H7.2C6.0799 20 5.51984 20 5.09202 19.782C4.71569 19.5903 4.40973 19.2843 4.21799 18.908C4 18.4802 4 17.9201 4 16.8V7.2C4 6.0799 4 5.51984 4.21799 5.09202C4.40973 4.71569 4.71569 4.40973 5.09202 4.21799C5.51984 4 6.0799 4 7.2 4Z" stroke="#000000" strokeWidth="0.744" strokeLinecap="round" strokeLinejoin="round"></path> 
							</g>
						</svg>
					</i>
					<input
						id="cardId"
						className="inputBoxWithIcon"
						type="text"
						value={cardId === 0 ? "" : cardId}
						onChange={e => setCardId(Number(e.target.value))}
						placeholder="eg. 12345"
					/>
				</div>
				<ActionButton type="button" id="btnReconnect" className="btnSave" onClick={createCommentSubmit}>Connect</ActionButton>
			</div>}
		</div>
	);
};

export default App;