import React from 'react'
import PropTypes from 'prop-types'
import * as yup from 'yup'
import getDisplayName from '@zap/utils/getDisplayName'

const isEmptyAmount = amount => amount === undefined || amount === null || amount === ''

/**
 * withNumberValidation - A HOC that will add validation of a `required` property to a field.
 *
 * @param {React.Component} Component Component to wrap
 * @returns {React.Component} Wrapped component
 */
const withNumberValidation = Component =>
  class extends React.Component {
    static displayName = `WithNumberValidation(${getDisplayName(Component)})`

    static propTypes = {
      isDisabled: PropTypes.bool,
      isRequired: PropTypes.bool,
      lessThan: PropTypes.number,
      max: PropTypes.number,
      min: PropTypes.number,
      moreThan: PropTypes.number,
      validate: PropTypes.func,
    }

    static defaultProps = {
      isDisabled: false,
      isRequired: false,
    }

    validate = (value = 0) => {
      const { isDisabled, isRequired, min, max, moreThan, lessThan } = this.props
      if (isDisabled) {
        return
      }
      try {
        let validator = yup.number().typeError('A number is required')
        if (isRequired) {
          validator = validator.required()
        }
        if (!isEmptyAmount(min)) {
          validator = validator.min(min)
        }
        if (!isEmptyAmount(max)) {
          validator = validator.max(max)
        }
        if (!isEmptyAmount(moreThan)) {
          validator = validator.moreThan(moreThan)
        }
        if (!isEmptyAmount(lessThan)) {
          validator = validator.lessThan(lessThan)
        }
        validator.validateSync(value)
      } catch (error) {
        return error.message
      }

      // Run any additional validation provided by the caller.
      const { validate } = this.props
      if (validate) {
        return validate(value)
      }
    }

    render() {
      return <Component {...this.props} validate={this.validate} />
    }
  }

export default withNumberValidation

@@ -481,149 +481,41 @@
 t =%3E
+ %7B
 %0A  c
-lass extends React.Component %7B%0A    static displayName = %60WithNumberValidation($%7BgetDisplayName(Component)%7D)%60%0A%0A    static propTypes
+onst WrappedComponent
  = 
+(
 %7B%0A
-  
     
@@ -528,32 +528,14 @@
 bled
-: PropTypes.bool
 ,%0A    
- 
- 
 isRe
@@ -544,281 +544,109 @@
 ired
-: PropTypes.bool,%0A      lessThan: PropTypes.number
+,%0A    lessThan
 ,%0A    
- 
- 
 max
-: PropTypes.number
 ,%0A    
- 
- 
 min
-: PropTypes.number,%0A      moreThan: PropTypes.number,%0A      validate: PropTypes.func,%0A    %7D%0A%0A    static defaultProps
+,%0A    moreThan,%0A    validate,%0A    ...rest%0A  %7D)
  =
+%3E
  %7B%0A    
-  isDisabled: false,%0A      isRequired: false,%0A    %7D%0A%0A    v
+const handleV
 alid
@@ -655,106 +655,18 @@
 e = 
-(
 value =
- 0) =%3E %7B%0A      const %7B isDisabled, isRequired, min, max, moreThan, lessThan %7D = this.props
+%3E %7B
 %0A   
@@ -1412,46 +1412,8 @@
 er.%0A
-      const %7B validate %7D = this.props%0A
     
@@ -1486,93 +1486,618 @@
   re
-nder() %7B%0A      return %3CComponent %7B...this.props%7D validate=%7Bthis.validate%7D /%3E%0A    %7D%0A  
+turn (%0A      %3CComponent%0A        %7B...rest%7D%0A        isDisabled=%7BisDisabled%7D%0A        isRequired=%7BisRequired%7D%0A        validate=%7BhandleValidate%7D%0A      /%3E%0A    )%0A  %7D%0A%0A  WrappedComponent.propTypes = %7B%0A    isDisabled: PropTypes.bool,%0A    isRequired: PropTypes.bool,%0A    lessThan: PropTypes.number,%0A    max: PropTypes.number,%0A    min: PropTypes.number,%0A    moreThan: PropTypes.number,%0A    validate: PropTypes.func,%0A  %7D%0A%0A  WrappedComponent.defaultProps = %7B%0A    isDisabled: false,%0A    isRequired: false,%0A  %7D%0A%0A  WrappedComponent.displayName = %60WithNumberValidation($%7BgetDisplayName(Component)%7D)%60%0A%0A  return WrappedComponent%0A
 %7D%0A%0Ae

convert withNumberValidation to functional component