import React, {useState} from "react";
import {Modal} from "@wordpress/components";
import {ModalContent} from "./FreemiusOverlay";
import localizeSettings from "../settings/localizeSettings";

type LockIconProps = React.HTMLAttributes<HTMLSpanElement> & {};

const LockIcon = (props: LockIconProps) => {
	const [isOpen, setOpen] = useState(false);
	const openModal = () => setOpen(true);
	const closeModal = () => setOpen(false);

	if (!localizeSettings.freemius.can_use_premium_code) {
		return (
			<>
				<span
					className={`lock-icon cursor-pointer ${props.className ?? ""}`}
					onClick={openModal}
					role="button"
					tabIndex={0}
					onKeyDown={(event) => {
						if (event.key === "Enter") {
							openModal();
						}
					}}
				>
					🔒
				</span>
				{isOpen && (
					<Modal
						size={"medium"}
						onRequestClose={closeModal}
						className={"hulk-pro-modal"}
					>
						<ModalContent/>
					</Modal>
				)}
			</>
		);
	}

	return null;
};

export default LockIcon;