import React, { useEffect, useState } from "react";
import { checkBsmapAuth } from "../handlers/phpApiHandler";
import { ActionButton } from "./actionButton";


export const BsmapLogin: React.FC<{ onGet?: () => void }> = (props) => {

	const [subdomain, setSubdomain] = useState("");
	const [apiKey, setApiKey] = useState("");

	const [hidden, setHidden] = useState(false);

	useEffect(() => {
		// If we already have the required data on localStorage execute onGet.
		if (localStorage.getItem('subdomain') && localStorage.getItem('apikey') && localStorage.getItem('apikey').startsWith('enc_')) {
			setHidden(true);
			props.onGet()
		}
	}, []);

	const bsmapLogin = async () => {
		if (!subdomain || !apiKey) throw new Error('Both subdomain and api key must be set.');
		if (subdomain == "" || apiKey == "") throw new Error('Neither subdomain nor api key can be an empty string.');

		const successfulLogIn = await checkBsmapAuth(subdomain, apiKey, true);
		if (successfulLogIn) {
			setHidden(true);
			props.onGet();
		}
	}

	return (
		<div id="bsmapLogin" hidden={hidden}>
			<div id="set" className="mainContainer">
				<h2 className="headerTitle">Connection Settings</h2>
				<div className="inputWithIcon">
					<label className="fLabel" htmlFor="subdomain">Subdomain</label>
					<i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-globe"
							viewBox="0 0 16 16">
							<path
								d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z" />
						</svg></i>
					<input
						id="subdomain"
						className="inputBoxWithIcon"
						type="text"
						value={subdomain}
						onChange={e => setSubdomain(e.target.value)}
						placeholder="subdomain"
					/>
				</div>
				<div className="inputWithIcon">
					<label className="fLabel" htmlFor="APIKey">API Key</label>
						<i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-key"
							viewBox="0 0 16 16">
							<path
								d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z" />
							<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
						</svg>
					</i>
					<input
						id="APIKey"
						className="inputBoxWithIcon"
						type="password"
						value={apiKey}
						onChange={e => setApiKey(e.target.value)}
						placeholder="api key"
					/>
				</div>
				<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">
							Please configure your Businessmap subdomain and API key.
							<br/>
							<a href="https://solutions.businessmap.io/logins" rel="noopener noreferrer"
								className="mbLink" target="_blank">How to get connection settings?</a>
						</div>
					</div>
				</div>
				<ActionButton type="button" id="btnReconnect" className="btnSave" onClick={bsmapLogin}>Connect</ActionButton>
			</div>
		</div>
	);
}