radioimage

import React, { Component } from 'react'

/**
 * External dependencies
 */
import { isEmpty } from 'lodash';

/**
 * WordPress dependencies
 */

const {  withInstanceId } = wp.components;
/**
 * Internal dependencies
 */
import BaseControl from './index';
import Svgicon from './svgicon';

function Radioimage( { label, selected, help, instanceId, onChange, options = [] } ) {
	const id = 'inspector-radio-control-' + instanceId;
	const onChangeValue = ( event ) => onChange( event.target.value );

	return ! isEmpty( options ) && (
		<BaseControl label={ label } id={ id } help={ help } className="blocks-radio-control">
			{ options.map( ( option, index ) =>
				<div
					key={ ( id + '-' + index ) }
					className="blocks-radio-control__option"
				>
					<input
						id={ ( id + '-' + index ) }
						className="blocks-radio-control__input"
						type="radio"
						name={ id }
						value={ option.value }
						onChange={ onChangeValue }
						selected={ option.value === selected }
						aria-describedby={ !! help ? id + '__help' : undefined }
					/>
					<label key={ option.value } htmlFor={ ( id + '-' + index ) }>
						{ option.label }
					</label>
					<Svgicon/>
				</div>
				
			) }
		</BaseControl>
	);
}

export default withInstanceId( Radioimage );