import '../scss/_image_group.scss';
import FieldControl from '../components/FieldControl';
import PremiumBadge from '../partials/premium-badge';

const ImageGroupField = ( {field, value, onChange} ) => {
	const options = field.options || {};

	return (
		<FieldControl id={field.id} label={field.label} premium={field.premium} help={field.description} link={field.link}>
			<div className="adpresso-image-group-container">
				{Object.entries( options ).map( ( [key, option] ) => {
					const isActive = key === value;
					let svgHtml = option.image;

					if ( isActive ) {
						svgHtml = svgHtml.replace( 'adpresso-icon-unselected', 'adpresso-icon-selected' );
					}

					return (
						<button
							type="button"
							className={`adpresso-image-group-item ${option.description ? 'adpresso-tooltip' : ''} ${isActive ? 'is-active' : ''} ${option.premium ? 'is-premium is-disabled' : ''}`}
							onClick={() => onChange( field.id, key )}
							aria-pressed={isActive}
							// Prevent the native browser tooltip if we use our own
							title={!option.description ? option.label : ''}
						>
						  <span
							  className="adpresso-image-group-item__image"
							  dangerouslySetInnerHTML={{__html: svgHtml}}
						  />
							<span className={`adpresso-image-group-item__label ${isActive ? 'adpresso-badge adpresso-color-active' : ''}`}>
							 {option.label}
						  </span>
							{option.premium && <PremiumBadge/>}
							{option.description && (
								<span className="adpresso-tooltip-text">
                         			{option.description}
                      			</span>
							)}
						</button>
					);
				} )}
			</div>
		</FieldControl>
	);
};

export default ImageGroupField;