import {__} from "@wordpress/i18n";
import React, {ComponentProps, useState} from "react";
import {Button, Modal} from "@wordpress/components";
import localizeSettings from "../settings/localizeSettings";

const settings = localizeSettings.freemius;

const FreemiusOverlay = (
	{
		className,
		children,
	}: ComponentProps<'div'>
) => {
	const [isOpen, setOpen] = useState(false);
	const openModal = () => setOpen(true);
	const closeModal = () => setOpen(false);

	if (!settings.can_use_premium_code) {
		return (
			<>
				<div
					className={`freemius-overlay relative z-[1] cursor-pointer inline-flex flex-col flex-wrap [&>*]:pointer-events-none ${className ?? ""}`}
					onClick={openModal}
					role="button"
					tabIndex={0}
					onKeyDown={(event) => {
						if (event.key === "Enter") {
							openModal();
						}
					}}
				>
					{children}
					{/*<span
						className={
							"inline-flex items-center text-[14px] mt-[2px] [&>a]:text-[12px]"
						}
						dangerouslySetInnerHTML={{
							__html: localizeSettings.freemius.notice,
						}}
					/>*/}
				</div>
				{isOpen && (
					<Modal
						size={"medium"}
						onRequestClose={closeModal}
						className={"hulk-pro-modal"}
					>
						<ModalContent/>
					</Modal>
				)}
			</>
		);
	}

	return children;
};

function ModalContent() {
	return (
		<div className="hulk-modal-wrap">
			<div className="hulk-modal-icon">
				<img
					src={`${localizeSettings.PLUGIN_DIR_URL}/assets/icons/modal-icon.svg`}
					alt="Upgrade"
					loading="lazy"
				/>
			</div>
			{!settings.is_premium ? (
				<>
					<h4>{__("UNLOCK PRO", "product-condition-manager-for-woocommerce")}</h4>
					<Button
						type={"button"}
						variant={"primary"}
						href={settings.checkout_url}
						target={"_blank"}
					>
						{__("UNLOCK PRO", "product-condition-manager-for-woocommerce")}
					</Button>
				</>
			) : (settings.is_not_paying && (
				<>
					<h4>{__("UPGRADE NOW!", "product-condition-manager-for-woocommerce")}</h4>
					<Button
						type={"button"}
						variant={"primary"}
						href={settings.get_upgrade_url}
						target={"_blank"}
					>
						{__("UPGRADE NOW!", "product-condition-manager-for-woocommerce")}
					</Button>
				</>
			))}
		</div>
	);
}

export {FreemiusOverlay, ModalContent};