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

const Switcher = ( {
	id = '',
	style,
	className = '',
	checked,
	title,
	titleSize = 'md',
	tabIndex,
	ariaLabel,
	loading = false,
	disabled,
	isPro = false,
	onChange,
} ) => {
	const handleChange = () => {
		if ( disabled || loading ) return;

		if ( onChange ) onChange( ! checked );
	};

	return (
		<div
			id={ id }
			style={ {
				...style,
				display: 'inline-flex',
				alignItems: 'center',
				gap: '0.75rem',
				userSelect: 'none',
			} }
			tabIndex={ tabIndex }
			aria-label={ ariaLabel }
			className={ clsx(
				'rbfb-switcher',
				disabled && 'rbfb-switcher--disabled',
				className
			) }
		>
			<div
				className={ clsx(
					'rbfb-switcher__toggle',
					checked && 'rbfb-switcher__toggle--active',
					loading && 'rbfb-switcher__toggle--loading'
				) }
				onClick={ handleChange }
			>
				<div className="rbfb-switcher__toggle-thumb" />
			</div>

			{ title &&
				( isPro ? (
					<InlineStack gap={ 10 } wrap={ false }>
						<Text
							color="gray-700"
							size={ titleSize }
							weight="medium"
							className="cursor-pointer"
							onClick={ handleChange }
						>
							{ title }
						</Text>

						<Status.Pro />
					</InlineStack>
				) : (
					<Text
						color="gray-700"
						size={ titleSize }
						weight="medium"
						className="cursor-pointer"
						onClick={ handleChange }
					>
						{ title }
					</Text>
				) ) }
		</div>
	);
};

export default Switcher;
