import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { setParams } from '../../shared/lib/router';
import { Switch } from '../../shared/ui/Switch';
import type { SettingToggle } from './settingToggles';

type ToggleRowProps = {
	toggle: SettingToggle;
	isOn: boolean;
	onToggle: ( isOn: boolean ) => void;
};

export function ToggleRow( {
	toggle,
	isOn,
	onToggle,
}: ToggleRowProps ): JSX.Element {
	const fieldId = `lcu-${ toggle.key }`;

	return (
		<div className="form-row">
			<div className="txt">
				<label className="label" htmlFor={ fieldId }>
					{ toggle.label }
				</label>
				<span>
					{ toggle.text }
					{ toggle.hasPreview && (
						<>
							{ ' ' }
							<button
								className="btn-link"
								type="button"
								onClick={ () => {
									setParams( { preview: 'editor' } );
								} }
							>
								{ __(
									'See how it looks',
									'aiplaz-link-checkup'
								) }
							</button>
						</>
					) }
				</span>
			</div>
			<Switch
				id={ fieldId }
				checked={ isOn }
				onChange={ ( event ) => {
					onToggle( event.target.checked );
				} }
			/>
		</div>
	);
}