/**
 * WordPress dependencies
 */
import { Button } from '@safe-wordpress/components';
import { useSelect } from '@safe-wordpress/data';
import { useState } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { store as NAB_ACCOUNT } from '@nab/account';
import { store as NAB_DATA } from '@nab/data';

/**
 * Internal dependencies
 */
import './style.scss';
import { UpgradePopover } from './upgrade-popover';

export type UpgradeActionProps = {
	readonly className?: string;
	readonly children?: string | JSX.Element | string[] | JSX.Element[];
	readonly variant: 'primary' | 'secondary' | 'link' | 'page-title-action';
};

export const UpgradeAction = ( {
	className = '',
	children,
	variant,
}: UpgradeActionProps ): JSX.Element | null => {
	const [ isPopoverVisible, showPopover ] = useState( false );
	const canUpgradeSubscription = useCanUpgradeSubscription();

	if ( ! canUpgradeSubscription ) {
		return null;
	}

	if ( 'page-title-action' === variant ) {
		className = variant + ' ' + className;
	}

	return (
		<span>
			<Button
				className={ `nab-upgrade-action ${ className }` }
				variant={
					'page-title-action' === variant ? 'secondary' : variant
				}
				icon={
					'page-title-action' === variant ? 'star-filled' : undefined
				}
				onClick={ () => showPopover( true ) }
			>
				{ children ?? _x( 'Upgrade', 'command', 'nelio-ab-testing' ) }
			</Button>
			<UpgradePopover
				placement="bottom"
				onClick={ () => showPopover( false ) }
				onFocusOutside={ () => showPopover( false ) }
				isOpen={ isPopoverVisible }
			/>
		</span>
	);
};

// =====
// HOOKS
// =====

const useCanUpgradeSubscription = () =>
	useSelect(
		( select ) =>
			select( NAB_DATA ).hasCapability( 'manage_nab_account' ) &&
			! select( NAB_DATA ).getPluginSetting(
				'areSubscriptionControlsDisabled'
			) &&
			select( NAB_DATA ).isSubscribedTo( 'basic', 'or-above' ) &&
			'canceled' !== select( NAB_ACCOUNT ).getState() &&
			'free' !== select( NAB_ACCOUNT ).getMode() &&
			'invitation' !== select( NAB_ACCOUNT ).getMode(),
		[]
	);