import { __ } from '@wordpress/i18n';
import { useSettings } from '../contexts/SettingsContext';
import { isTrue } from '../Helpers';
import useProGate from '../hooks/useProGate';
import Toggle from './Toggle';

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

export const UltimateBadge = () => <span className="ssgs-badge purple">{ __( 'Ultimate', TEXT_DOMAIN ) }</span>;

export const NewBadge = () => <span className="ssgs-badge ssgsw-badge-new">{ __( 'New', TEXT_DOMAIN ) }</span>;

/**
 * One settings row with the legacy `.form-group` markup:
 * label > .ssgs-check + .label-text + badges, then .description.
 *
 * @param {Object}   props
 * @param {string}   props.name        Option key.
 * @param {string}   props.label       Row title.
 * @param {string}   props.description Help text.
 * @param {boolean}  props.pro         Ultimate feature.
 * @param {Object}   props.badges      Extra badges after the title.
 * @param {string}   props.labelClass  Extra classes on .label-text.
 * @param {boolean}  props.disabled    Disabled in the current mode.
 * @param {Function} props.onToggle    Custom change handler; defaults to updating the option.
 * @param {boolean}  props.checked     Custom checked state; defaults to the option value.
 * @param {Object}   props.children    Content shown under the description.
 * @param {string}   props.className   Extra classes on .form-group.
 * @param {Object}   props.descriptionContent Custom description markup.
 */
const SettingRow = ( {
	name,
	label,
	description,
	pro = false,
	badges = null,
	labelClass = '',
	disabled = false,
	onToggle,
	checked,
	children,
	className = '',
	descriptionContent,
	toggleClassName,
} ) => {
	const { options, updateOption } = useSettings();
	const { isPro, showLockedMessage } = useProGate();
	const locked = pro && ! isPro;
	const descriptionId = `ssgsw-desc-${ name }`;
	const isChecked = checked !== undefined ? checked : isTrue( options[ name ] );

	return (
		<div className={ `form-group${ locked ? ' ssgsw-promo' : '' } ${ className }`.trim() }>
			<label htmlFor={ `ssgsw-${ name }` } className={ locked ? 'ssgsw-promo' : undefined }>
				<Toggle
					id={ `ssgsw-${ name }` }
					name={ name }
					checked={ isChecked }
					onChange={ onToggle || ( ( value ) => updateOption( name, value ) ) }
					locked={ locked }
					onLockedClick={ showLockedMessage }
					disabled={ disabled }
					describedBy={ descriptionId }
					className={ toggleClassName }
				/>
				<span className={ `label-text ${ labelClass }`.trim() }>{ label }</span>
				{ badges }
				{ locked && <UltimateBadge /> }
			</label>

			<div className="description" id={ descriptionId }>
				{ descriptionContent || <p>{ description }</p> }
			</div>

			{ children }
		</div>
	);
};

export default SettingRow;