import {
	Field,
	Label,
	ToggleSwitch,
} from '@rocket.chat/fuselage';
import React from 'react';

import { ResetSettingButton } from '../ResetSettingButton';

export function BooleanSettingInput({
	_id,
	label,
	disabled,
	readonly,
	autocomplete,
	value,
	onChange,
	hasResetButton,
	onResetButtonClick,
}) {
	const handleChange = (event) => {
		const value = event.currentTarget.checked;
		onChange({ value });
	};

	return <Field.Row>
		<Label position='end' text={label} title={_id}>
			<ToggleSwitch
				value='true'
				checked={value === true}
				disabled={disabled}
				readOnly={readonly}
				autoComplete={autocomplete === false ? 'off' : undefined}
				onChange={handleChange}
			/>
		</Label>
		{hasResetButton && <ResetSettingButton onClick={onResetButtonClick} />}
	</Field.Row>;
}