/**
 * The external dependencies.
 */
import React from 'react';
import PropTypes from 'prop-types';
import { setStatic } from 'recompose';

/**
 * The internal dependencies.
 */
import Field from 'fields/components/field';
import { enhance } from 'fields/components/radio';
import { TYPE_RADIO_IMAGE } from 'fields/constants';

/**
 * Render a radio input field.
 *
 * @param  {Object}        props
 * @param  {String}        props.name
 * @param  {Object}        props.field
 * @param  {Function}      props.handleChange
 * @param  {Function}      props.isChecked
 * @return {React.Element}
 */
export const RadioImageField = ({
	name,
	field,
	handleChange,
	isChecked
}) => {
	return <Field field={field}>
		<div className="carbon-radio-image-list">
			{
				field.options.map((option, index) => (
					<div key={index} className="carbon-radio-image-item">
						<label>
							<input
								type="radio"
								name={name}
								value={option.value}
								checked={isChecked(option)}
								disabled={!field.ui.is_visible}
								onChange={handleChange(option)}
								{...field.attributes} />

							<figure className="carbon-radio-image-holder">
								<img src={option.name} />
							</figure>
						</label>
					</div>
				))
			}
		</div>
	</Field>;
};

/**
 * Validate the props.
 *
 * @type {Object}
 */
RadioImageField.propTypes = {
	name: PropTypes.string,
	field: PropTypes.shape({
		attributes: PropTypes.object,
		options: PropTypes.arrayOf(PropTypes.shape({
			name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
			value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
		})),
	}),
	handleChange: PropTypes.func,
};

export default setStatic('type', [
	TYPE_RADIO_IMAGE,
])(enhance(RadioImageField));
