import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ajaxPost } from '../api/ajax';
import { getNotices } from '../Helpers';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';

/**
 * "Get premium features…" banner from the removed templates/dashboard/base.php, shown when neither Ultimate
 * nor the multivendor add-on is active and it has not been hidden (App::get_notice_flags()).
 */
const UpgradeNotice = () => {
	const [ visible, setVisible ] = useState( !! getNotices().upgrade );

	if ( ! visible ) {
		return null;
	}

	// Hide immediately, then persist (legacy hideUpgradeNotice did the same).
	const hide = ( event ) => {
		event.preventDefault();
		setVisible( false );
		ajaxPost( 'ssgsw_hide_upgrade_notice' ).catch( () => {} );
	};

	return (
		<div className="ssgsw-upgrade-notice" role="region" aria-label={ __( 'Upgrade to ULTIMATE', TEXT_DOMAIN ) }>
			<div className="ssgsw-upgrade-notice-content">
				Get <strong>premium features</strong> in the ULTIMATE version.
			</div>
			<div className="ssgsw-upgrade-notice-buttons">
				<a href="https://go.wppool.dev/mr9n" target="_blank" rel="noreferrer">
					{ __( 'Upgrade to ULTIMATE', TEXT_DOMAIN ) }
				</a>
				<a href="#hide-upgrade-notice" role="button" onClick={ hide }>
					{ __( 'Hide', TEXT_DOMAIN ) }
				</a>
			</div>
		</div>
	);
};

export default UpgradeNotice;