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

const settings = (window as any).hulk_woo_pdil_settings as Settings;
const licensing = settings.licensing;

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

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

	if (!licensing.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
							is_premium={licensing.is_premium}
							checkout_url={licensing.checkout_url}
							is_not_paying={licensing.is_not_paying}
							get_upgrade_url={licensing.get_upgrade_url}
							PLUGIN_DIR_URL={settings.PLUGIN_DIR_URL}
						/>
					</Modal>
				)}
			</>
		);
	}

	return null;
};

export default LockIcon;
