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

const FreemiusOverlay = ({
							 children,
							 can_use_premium_code,
							 is_premium,
							 checkout_url,
							 is_not_paying,
							 get_upgrade_url,
							 PLUGIN_DIR_URL,
						 }: ComponentProps<"div"> & {
	can_use_premium_code: boolean;
	is_premium: boolean;
	checkout_url: string;
	is_not_paying: boolean;
	get_upgrade_url: string;
	PLUGIN_DIR_URL: string;
}) => {
	const [isOpen, setOpen] = useState(false);
	const openModal = () => setOpen(true);
	const closeModal = () => setOpen(false);

	if (!can_use_premium_code) {
		return (
			<>
				<div
					className={"freemius-overlay"}
					onClick={openModal}
					role="button"
					tabIndex={0}
					onKeyDown={(event) => {
						if (event.key === "Enter") {
							openModal();
						}
					}}
				>
					{children}
				</div>
				{isOpen && (
					<Modal
						size={"small"}
						onRequestClose={closeModal}
						className={"hulk-pro-modal"}
					>
						<ModalContent
							is_premium={is_premium}
							checkout_url={checkout_url}
							is_not_paying={is_not_paying}
							get_upgrade_url={get_upgrade_url}
							PLUGIN_DIR_URL={PLUGIN_DIR_URL}
						/>
					</Modal>
				)}
			</>
		);
	}

	return children;
};

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

export {FreemiusOverlay, ModalContent};
