import { __, sprintf } from '@wordpress/i18n';
import {
	getInheritedResponsiveMeta,
	hasResponsiveContent,
} from './responsiveValueUtils';

const DEVICE_LABELS = {
	desktop: __( 'Desktop', 'axcelersblocks' ),
	tablet: __( 'Tablet', 'axcelersblocks' ),
	mobile: __( 'Mobile', 'axcelersblocks' ),
};

export default function ResponsiveInheritedNotice( {
	values,
	activeDevice,
	selector = ( value ) => value,
	options = [],
	formatValue,
	className = '',
} ) {
	const inheritedMeta = getInheritedResponsiveMeta(
		values,
		activeDevice,
		selector
	);

	if ( ! inheritedMeta ) {
		return null;
	}

	let displayValue = inheritedMeta.value;

	if ( typeof formatValue === 'function' ) {
		displayValue = formatValue( inheritedMeta.value, inheritedMeta.device );
	} else if ( Array.isArray( options ) ) {
		const matchedOption = options.find(
			( option ) => option.value === inheritedMeta.value
		);

		if ( matchedOption?.label ) {
			displayValue = matchedOption.label;
		}
	}

	if ( ! hasResponsiveContent( displayValue ) ) {
		return null;
	}

	const classes = [
		'axcelersblocks-responsive-inherited',
		className,
	]
		.filter( Boolean )
		.join( ' ' );

	return (
		<div className={ classes }>
			<span className="axcelersblocks-responsive-inherited__badge">
				{ sprintf(
					/* translators: %s: device name, e.g. "Desktop" or "Tablet". */
					__( 'Inherited from %s', 'axcelersblocks' ),
					DEVICE_LABELS[ inheritedMeta.device ] || inheritedMeta.device
				) }
			</span>
			<span className="axcelersblocks-responsive-inherited__value">
				{ String( displayValue ) }
			</span>
		</div>
	);
}
