import clsx from '../../../utils/clsx';
import { InlineStack } from '../../molecules';
import { Text } from '../Text';
import { Status } from '../Status';

const Checkbox = ( {
	id,
	name,
	style,
	className = '',
	checked,
	defaultChecked = false,
	size = 'medium',
	rounded = 'xs',
	title,
	tabIndex,
	ariaLabel,
	readonly,
	visible = true,
	disabled = false,
	isPro = false,
	onChange,
} ) => {
	const classes = clsx(
		'rbfb-checkbox',
		`rbfb-checkbox--${ size }`,
		`rounded-${ rounded }`,
		disabled && 'rbfb-checkbox--disabled'
	);

	const handleCheck = ( isChecked ) => {
		if ( readonly ) return;
		onChange && onChange( isChecked );
	};

	if ( ! visible ) return null;

	return (
		<InlineStack
			gap={ 10 }
			style={ {
				opacity: disabled ? '0.6' : '1',
			} }
			className={ className }
		>
			<label
				title={ title }
				style={ style }
				className={ classes }
				onClick={ ( e ) => e.stopPropagation() }
			>
				<input
					id={ id }
					type="checkbox"
					name={ name }
					checked={ checked }
					defaultChecked={ defaultChecked }
					className="rbfb-checkbox__input"
					onClick={ ( e ) => e.stopPropagation() }
					onChange={ ( e ) =>
						onChange && handleCheck( e.target.checked )
					}
					tabIndex={ tabIndex }
					aria-label={ ariaLabel }
					aria-readonly={ readonly || undefined }
					readOnly={ readonly }
					disabled={ disabled }
				/>
				<span className="rbfb-checkbox__box" />
			</label>

			{ title &&
				( isPro ? (
					<InlineStack gap={ 10 } wrap={ false }>
						<Text
							color="gray-700"
							size="sm"
							style={ {
								cursor: 'pointer',
								userSelect: 'none',
							} }
							onClick={ () => handleCheck( ! checked ) }
						>
							{ title }
						</Text>

						<Status.Pro />
					</InlineStack>
				) : (
					<Text
						color="gray-700"
						size="sm"
						style={ {
							cursor: 'pointer',
							userSelect: 'none',
						} }
						onClick={ () => handleCheck( ! checked ) }
					>
						{ title }
					</Text>
				) ) }
		</InlineStack>
	);
};

export default Checkbox;
