import { useBoundStore } from '../store/store';
import { _n, __, sprintf } from '@wordpress/i18n';

function getImportCountNotice(counts: {
	pricingLevels: number;
	products: number;
}) {
	return sprintf(
		// translators: %1$s: number of pricing levels imported, %2$s: number of products imported
		__('%1$s been imported for %2$s.', 'gp-conditional-pricing'),
		sprintf(
			// translators: %s: number of pricing levels imported
			_n(
				'%1$d pricing level has',
				'%1$d pricing levels have',
				counts.pricingLevels,
				'gp-conditional-pricing'
			),
			counts.pricingLevels
		),
		sprintf(
			// translators: %s: number of products imported
			_n(
				'%1$d product',
				'%1$d products',
				counts.products,
				'gp-conditional-pricing'
			),
			counts.products
		)
	);
}

export function ImportNotices() {
	const { importCounts, setImportCounts } = useBoundStore((state) => ({
		importCounts: state.importCounts,
		setImportCounts: state.setImportCounts,
	}));

	if (!importCounts) {
		return null;
	}

	return (
		<div className="alert gforms_note_success" role="alert">
			<p>
				{getImportCountNotice(importCounts)}{' '}
				<span
					dangerouslySetInnerHTML={{
						__html: __(
							'You must click <strong>Save Pricing</strong> to preserve these changes.',
							'gp-conditional-pricing'
						),
					}}
				/>
			</p>
			<button
				type="button"
				className="notice-dismiss"
				onClick={() => setImportCounts(null)}
			>
				<span className="screen-reader-text">
					{__('Dismiss this notice.', 'gp-conditional-pricing')}
				</span>
			</button>
		</div>
	);
}