import {sprintf, __, _n} from '@wordpress/i18n';
import Button from '../../design/components/Button';
import './scss/components/BulkActionBar.scss';
import PremiumBadge from '../../design/partials/premium-badge';

const BulkActionBar = ( {selectedCount, onBulkAction, actions} ) => {
	if ( selectedCount === 0 ) {
		return null;
	}

	// Convert the { 'trash': { label: ... } } object to an array
	const actionList = Object.keys( actions ).map( key => ({
		key: key,
		...actions[key]
	}) );

	return (
		<div className="adpresso-bulk-action-bar">
			<div className="adpresso-bulk-action-bar__content">
				<div className="adpresso-bulk-action-bar__actions">
					{/* Dynamically renders all bulk actions from the PHP configuration */}
					{actionList.map( action => {
						const variant = action.premium ? 'premium' : action.variant;
						const isDisabled = action.disabled || false;
						const label = action.label;
						const title = isDisabled ? __( 'Upgrade to Pro to unlock this feature', 'adpresso' ) : '';
						const button = <Button
							key={action.key}
							variant={variant}
							onClick={() => onBulkAction( action.key )}
							disabled={isDisabled}
							title={title}
							className="adpresso-btn adpresso-btn-action"
						>
							{label}
						</Button>;
						return action.premium ? (
							<div style={{display: 'flex', alignItems: 'center'}}>
								{button}
								{action.premium && <PremiumBadge/>}
							</div>
						) : (
							button
						);
					} )}
				</div>
				<div className="adpresso-bulk-action-bar__selected-count">
					{sprintf(
						_n(
							'%d item selected',
							'%d items selected',
							selectedCount,
							'adpresso'
						),
						selectedCount
					)}
				</div>
			</div>
		</div>
	);
};

export default BulkActionBar;