import classNames from 'classnames';
import { PayPalCheckbox, PayPalRdb } from './index';

const OptionSelector = ( {
	multiSelect = false,
	options,
	value,
	onChange,
} ) => (
	<div className="ppcp-r-select-box-wrapper">
		{ options.map(
			( { value: itemValue, title, description, contents } ) => {
				let isSelected;

				if ( Array.isArray( value ) ) {
					isSelected = value.includes( itemValue );
				} else {
					isSelected = value === itemValue;
				}

				return (
					<OptionItem
						key={ itemValue }
						itemTitle={ title }
						itemDescription={ description }
						itemValue={ itemValue }
						onChange={ onChange }
						isMulti={ multiSelect }
						isSelected={ isSelected }
					>
						{ contents }
					</OptionItem>
				);
			}
		) }
	</div>
);

export default OptionSelector;

const OptionItem = ( {
	itemTitle,
	itemDescription,
	itemValue,
	onChange,
	isMulti,
	isSelected,
	children,
} ) => {
	const boxClassName = classNames( 'ppcp-r-select-box', {
		'ppcp--selected': isSelected,
	} );

	return (
		<div className={ boxClassName }>
			<InputField
				value={ itemValue }
				isRadio={ ! isMulti }
				onChange={ onChange }
				isSelected={ isSelected }
			/>

			<div className="ppcp-r-select-box__content">
				<div className="ppcp-r-select-box__content-inner">
					<span className="ppcp-r-select-box__title">
						{ itemTitle }
					</span>
					<p className="ppcp-r-select-box__description">
						{ itemDescription }
					</p>
					{ children && (
						<div className="ppcp-r-select-box__additional-content">
							{ children }
						</div>
					) }
				</div>
			</div>
		</div>
	);
};

const InputField = ( { value, onChange, isRadio, isSelected } ) => {
	if ( isRadio ) {
		return (
			<PayPalRdb
				value={ value }
				handleRdbState={ onChange }
				checked={ isSelected }
			/>
		);
	}

	return (
		<PayPalCheckbox
			value={ value }
			changeCallback={ onChange }
			checked={ isSelected }
		/>
	);
};