import { Button } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Icon, check, warning } from '@wordpress/icons';
import { installPlugin, activatePlugin } from '@shared/api/wp';
import { useActivityStore } from '@shared/state/activity';

export const RecommendationCard = ({ recommendation }) => {
	if (recommendation.pluginSlug) {
		return <InstallCard recommendation={recommendation} />;
	}
	return <LinkCard recommendation={recommendation} />;
};

const LinkCard = ({ recommendation }) => {
	const { by, slug, description, image, title, linkType } = recommendation;
	const { incrementActivity } = useActivityStore();
	if (!recommendation?.[linkType]) return null;

	return (
		<a
			href={recommendation[linkType]?.replace(
				'{APEXDOMAIN}',
				window.extSharedData?.apexDomain ?? '',
			)}
			onClick={() => incrementActivity(`recommendations-${slug}`)}
			target="_blank"
			rel="noopener noreferrer"
			className="cursor-pointer rounded border border-gray-200 bg-transparent p-4 text-left text-base no-underline hover:border-design-main hover:bg-gray-50 rtl:text-right">
			<div className="h-full w-full">
				<img
					className="h-8 w-8 rounded fill-current"
					alt={
						by ? sprintf(__('Logo for %s', 'extendify-local'), by) : undefined
					}
					src={image}
				/>
				<div className="mt-2 font-semibold">{title}</div>
				{by && <div className="text-sm text-gray-700">{by}</div>}
				<div className="mt-2 text-sm text-gray-800">{description}</div>
			</div>
		</a>
	);
};

const InstallCard = ({ recommendation }) => {
	const { by, slug, description, image, title, pluginSlug } = recommendation;
	const { incrementActivity } = useActivityStore();
	return (
		<div
			onClick={() => incrementActivity(`recommendations-install-${slug}`)}
			className="rounded border border-gray-200 bg-transparent p-4 text-left text-base rtl:text-right">
			<div className="h-full w-full">
				<img
					className="h-8 w-8 rounded fill-current"
					alt={
						by ? sprintf(__('Logo for %s', 'extendify-local'), by) : undefined
					}
					src={image}
				/>
				<div className="mt-2 font-semibold">{title}</div>
				{by && <div className="text-sm text-gray-700">{by}</div>}
				<div className="mb-3 mt-2 text-sm text-gray-800">{description}</div>
				<InstallButton pluginSlug={pluginSlug} />
			</div>
		</div>
	);
};

const InstallButton = ({ pluginSlug }) => {
	const [installing, setInstalling] = useState(false);
	const [status, setStatus] = useState('');

	useEffect(() => {
		const { installedPlugins, activePlugins } = window.extSharedData;
		const hasPlugin = (p) => p?.includes(pluginSlug);
		const installed = Object.values(installedPlugins).some(hasPlugin);
		const active = Object.values(activePlugins).some(hasPlugin);
		if (installed) setStatus('inactive');
		if (active) setStatus('active');
	}, [pluginSlug, setStatus]);

	const handleClick = async () => {
		setInstalling(true);
		try {
			await installPlugin(pluginSlug);
		} catch (_) {
			// Fail silently if the plugin is already installed
		}
		try {
			await activatePlugin(pluginSlug);
			setStatus('active');
		} catch (_) {
			setStatus('error');
			setTimeout(() => {
				setStatus(status);
			}, 1500);
		}
		setInstalling(false);
	};

	if (status === 'error') {
		return (
			<>
				<p
					className="flex items-center fill-wp-alert-red text-wp-alert-red"
					style={{ fontSize: '13px' }}>
					<Icon icon={warning} />
					{__('Error', 'extendify-local')}
				</p>
			</>
		);
	}

	if (status === 'active') {
		return (
			<>
				<p
					className="flex items-center fill-wp-alert-green text-wp-alert-green"
					style={{ fontSize: '13px' }}>
					<Icon icon={check} />
					{__('Active', 'extendify-local')}
				</p>
			</>
		);
	}

	if (status === 'inactive') {
		return (
			<Button
				onClick={handleClick}
				type="button"
				variant="secondary"
				size="compact"
				disabled={installing}
				isBusy={installing}>
				{installing
					? __('Activating...', 'extendify-local')
					: __('Activate', 'extendify-local')}
			</Button>
		);
	}

	return (
		<Button
			onClick={handleClick}
			type="button"
			variant="secondary"
			size="compact"
			disabled={installing}
			isBusy={installing}>
			{installing
				? __('Installing...', 'extendify-local')
				: __('Install Now', 'extendify-local')}
		</Button>
	);
};
    <div class="nsl-box nsl-box-yellow nsl-box-yellow-bg nsl-box-padlock">
        <h2 class="title">Get Pro Addon to unlock more features</h2>
        <p>The features below are available in Nextend Social Login Pro Addon. Get it today and tweak the awesome settings.</p>
        <p>If you already have a license, you can Authorize your Pro Addon. Otherwise you can purchase it using the button below.</p>
        <p>
            <a href="https://nextendweb.com/social-login/?utm_campaign=nsl&utm_source=buy-pro-addon-button&utm_medium=nsl-wordpress-free"
               target="_blank"
               class="button button-primary">Buy Pro Addon</a>
            <a href="https://dispenseroo.store/wp-admin/options-general.php?page=nextend-social-login&view=pro-addon"
               class="button button-secondary">Authorize Pro Addon</a>
        </p>
    </div>
    <table class="form-table">
    <tbody>
    <tr>
        <th scope="row">Button style</th>
        <td>
            <fieldset>
                <label>
                    <input type="radio" name="woocoommerce_form_button_style"
                           value="default"  checked="checked"  disabled >
                    <span>Default</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/buttons/default.png"/>
                </label>
                <label>
                    <input type="radio" name="woocoommerce_form_button_style"
                           value="fullwidth"  disabled >
                    <span>Fullwidth</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/buttons/fullwidth.png"/>
                </label>
                <label>
                    <input type="radio" name="woocoommerce_form_button_style"
                           value="icon"  disabled >
                    <span>Icon</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/buttons/icon.png"/>
                </label><br>
            </fieldset>
        </td>
    </tr>

    <tr>
        <th scope="row">Login form</th>
        <td>
            <fieldset>
                <label><input type="radio" name="woocommerce_login"
                              value=""  disabled >
                    <span>No Connect button in login form</span></label><br>
                <label><input type="radio" name="woocommerce_login"
                              value="before"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_login_form_start</code></label><br>
                <label><input type="radio" name="woocommerce_login"
                              value="after"  checked="checked"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_login_form_end</code></label><br>
            </fieldset>
        </td>
    </tr>
    <tr>
        <th scope="row">Login layout</th>
        <td>
            <fieldset>
                <label>
                    <input type="radio" name="woocommerce_login_form_layout"
                           value="default"  checked="checked"  disabled >
                    <span>Default</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/default.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_login_form_layout"
                           value="below"  disabled >
                    <span>Below</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/below.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_login_form_layout"
                           value="below-separator"  disabled >
                    <span>Below with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/below-separator.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_login_form_layout"
                           value="above"  disabled >
                    <span>Above</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/above.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_login_form_layout"
                           value="above-separator"  disabled >
                    <span>Above with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/above-separator.png"/>
                </label><br>
            </fieldset>
        </td>
    </tr>

    <tr>
        <th scope="row">Register form</th>
        <td>
            <fieldset>
                <label><input type="radio" name="woocommerce_register"
                              value=""  disabled >
                    <span>No Connect button in register form</span></label><br>
                <label><input type="radio" name="woocommerce_register"
                              value="before"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_register_form_start</code></label><br>
                <label><input type="radio" name="woocommerce_register"
                              value="after"  checked="checked"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_register_form_end</code></label><br>
            </fieldset>
        </td>
    </tr>
    <tr>
        <th scope="row">Register layout</th>
        <td>
            <fieldset>
                <label>
                    <input type="radio" name="woocommerce_register_form_layout"
                           value="default"  checked="checked"  disabled >
                    <span>Default</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/default.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_register_form_layout"
                           value="below"  disabled >
                    <span>Below</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/below.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_register_form_layout"
                           value="below-separator"  disabled >
                    <span>Below with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/below-separator.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_register_form_layout"
                           value="above"  disabled >
                    <span>Above</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/above.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_register_form_layout"
                           value="above-separator"  disabled >
                    <span>Above with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/above-separator.png"/>
                </label><br>
            </fieldset>
        </td>
    </tr>

    <tr>
        <th scope="row">Billing form</th>
        <td>
            <fieldset>
                <label><input type="radio" name="woocommerce_billing"
                              value=""  disabled >
                    <span>No Connect button in billing form</span></label><br>
                <label><input type="radio" name="woocommerce_billing"
                              value="before"  checked="checked"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_before_checkout_billing_form</code></label><br>
                <label><input type="radio" name="woocommerce_billing"
                              value="after"  disabled >
                    <span>Connect button on</span></label>
                <code>Action:                    woocommerce_after_checkout_billing_form</code><br>

                <label><input type="radio" name="woocommerce_billing"
                              value="before-checkout-registration"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_before_checkout_registration_form</code></label><br>

                <label><input type="radio" name="woocommerce_billing"
                              value="after-checkout-registration"  disabled >
                    <span>Connect button on</span></label>
                <code>Action:                    woocommerce_after_checkout_registration_form</code><br>

                <label><input type="radio" name="woocommerce_billing"
                              value="before-checkout-shipping-form"  disabled >
                    <span>Connect button on</span>
                    <code>Action:                        woocommerce_before_checkout_shipping_form</code></label><br>

                <label><input type="radio" name="woocommerce_billing"
                              value="after-checkout-shipping-form"  disabled >
                    <span>Connect button on</span></label>
                <code>Action:                    woocommerce_after_checkout_shipping_form</code><br>

            </fieldset>
        </td>
    </tr>
    <tr>
        <th scope="row">Billing layout</th>
        <td>
            <fieldset>
                <label>
                    <input type="radio" name="woocommerce_billing_form_layout"
                           value="default"  checked="checked"  disabled >
                    <span>Default</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/default.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_billing_form_layout"
                           value="default-separator"  disabled >
                    <span>Default with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/default-separator.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_billing_form_layout"
                           value="below"  disabled >
                    <span>Below</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/below.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_billing_form_layout"
                           value="below-separator"  disabled >
                    <span>Below with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/below-separator.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_billing_form_layout"
                           value="above"  disabled >
                    <span>Above</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/above.png"/>
                </label>
                <label>
                    <input type="radio" name="woocommerce_billing_form_layout"
                           value="above-separator"  disabled >
                    <span>Above with separator</span><br/>
                    <img src="https://dispenseroo.store/wp-content/plugins/nextend-facebook-connect/admin/images/layouts/above-separator.png"/>
                </label><br>
            </fieldset>
        </td>
    </tr>

    <tr>
        <th scope="row">Account details</th>
        <td>
            <fieldset>
                <label><input type="radio" name="woocommerce_account_details"
                              value=""  disabled >
                    <span>No Connect buttons in account details form</span></label><br>
                <label><input type="radio" name="woocommerce_account_details"
                              value="before"  checked="checked"  disabled >
                    <span>Link buttons on</span>
                    <code>Action:                        woocommerce_edit_account_form_start</code></label><br>
                <label><input type="radio" name="woocommerce_account_details"
                              value="after"  disabled >
                    <span>Link buttons on</span>
                    <code>Action:                        woocommerce_edit_account_form_end</code></label><br>
            </fieldset>
        </td>
    </tr>

    <tr>
        <th scope="row">Button alignment</th>
        <td>
            <fieldset>
                <label><input type="radio" name="woocoommerce_form_button_align"
                              value="left"  checked="checked"  disabled >
                    <span>Left</span></label><br>
                <label><input type="radio" name="woocoommerce_form_button_align"
                              value="center"  disabled >
                    <span>Center</span></label><br>

                <label><input type="radio" name="woocoommerce_form_button_align"
                              value="right"  disabled >
                    <span>Right</span></label><br>
            </fieldset>
        </td>
    </tr>

    <tr>
        <th scope="row">Email template for registration</th>
        <td>
            <fieldset>
                <label><input type="radio" name="woocoommerce_registration_email_template"
                              value="default"  disabled >
                    <span>WordPress default notification</span></label><br>
                <label><input type="radio" name="woocoommerce_registration_email_template"
                              value="woocommerce"  checked="checked"  disabled >
                    <span>WooCommerce registration notification</span></label><br>
            </fieldset>
            <p class="description">Defines whether the registration with <b>Nextend Social Login</b> will send the same registration notification that <b>WooCommerce</b> does, instead of the <b>WordPress</b> default one.</p>
        </td>
    </tr>

    </tbody>
</table>
{"id":1,"date":"2024-05-29T02:45:05","date_gmt":"2024-05-29T02:45:05","guid":{"rendered":"https:\/\/dispenseroo.store\/?p=1"},"modified":"2024-05-29T02:45:05","modified_gmt":"2024-05-29T02:45:05","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/dispenseroo.store\/2024\/05\/29\/hello-world\/","title":{"rendered":"Hello world!"},"content":{"rendered":"<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!<\/p>","protected":false},"excerpt":{"rendered":"<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":0,"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"wp:attachment":[{"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dispenseroo.store\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}