text: import { createElement, Component } from '@wordpress/element'
  import _ from 'underscore'
  import classnames from 'classnames'
  import InputWithOnlyNumbers from '../components/InputWithOnlyNumbers'
  
  const NumberOption = ({ value, option, option: { attr }, onChange }) => (
  	<div
  		className={classnames('ct-option-number', {
  			[`ct-reached-limits`]:
  				parseInt(value, 10) === parseInt(option.min) ||
  				parseInt(value, 10) === parseInt(option.max),
  		})}
  		{...(attr || {})}>
  		<a
  			className={classnames('ct-minus', {
  				['ct-disabled']: parseInt(value, 10) === parseInt(option.min),
  			})}
  			onClick={() =>
  				onChange(
  					Math.min(
  						Math.max(
  							parseInt(value, 10) - 1,
  							option.min || -Infinity
  						),
  						option.max || Infinity
  					)
  				)
  			}
  		/>
  
  		<a
  			className={classnames('ct-plus', {
  				['ct-disabled']: parseInt(value, 10) === parseInt(option.max),
  			})}
  			onClick={() =>
  				onChange(
  					Math.min(
  						Math.max(
  							parseInt(value, 10) + 1,
  							option.min || -Infinity
  						),
  						option.max || Infinity
  					)
  				)
  			}
  		/>
  
  		<InputWithOnlyNumbers
  			value={value}
  			onBlur={() =>
  				parseInt(value, 10)
  					? onChange(
  							Math.min(
  								Math.max(value, option.min || -Infinity),
  								option.max || Infinity
  							)
  					  )
  					: []
  			}
  			onChange={(value, can_safely_parse) =>
  				can_safely_parse && _.isNumber(parseInt(value, 10))
  					? onChange(
  							Math.min(
  								Math.max(value, option.min || -Infinity),
  								option.max || Infinity
  							)
  					  )
  					: parseFloat(value)
  					? onChange(
  							Math.min(parseFloat(value), option.max || Infinity)
  					  )
  					: onChange(value)
  			}
  		/>
  	</div>
  )
  
  export default NumberOption
  