import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import * as formatNumberHelper from '~client/utils/format-number-helper'
import Page from './page'

const mapStateToProps = (state, props) => {
  const { goal } = props.widget

  return {
    initialValues: {
      goal: goal ? formatNumberHelper.float(goal) : undefined,
      default_donation_value: 1,
      main_color: '#54d0f6',
      recurring_period: 30,
      payment_type: 'unique',
      payment_methods: 'false',
      ...props.widget.settings || {}
    }
  }
}

const fields = [
  'title_text', 'button_text', 'goal', 'goal_date_limit', 'main_color', 'default_donation_value',
  'donation_value1', 'donation_value2', 'donation_value3', 'donation_value4',
  'donation_value5', 'recurring_period', 'payment_type', 'payment_methods'
]

const validate = values => {
  const errors = {}
  if (!values.button_text) {
    errors.button_text = 'Insira o texto do botão'
  } else if (values.button_text.length > 50) {
    errors.button_text = 'O limite de caracteres foi atingido.'
  }

  if (values.goal && String(values.goal).replace(/\./g, '').match(/\D/g)) {
    errors.goal = 'Formato inválido. ' +
      'Utilize apenas números e ponto como separador decimal. ' +
      'Ex: 10000.50'
  }
  return errors
}

export default connect(mapStateToProps)(
  reduxForm({ form: 'widgetsDonationForm', fields, validate })(Page)
)

@@ -1081,11 +1081,40 @@
 goal
- &&
+) %7B%0A    const hasAlphanumerics =
  Str
@@ -1161,20 +1161,144 @@
 h(/%5CD/g)
+%0A    const hasMultipleDots = String(values.goal).match(/%5C./g %7C%7C %5B%5D).length %3E 1%0A    if (hasAlphanumerics %7C%7C hasMultipleDots
 ) %7B%0A
+  
     erro
@@ -1336,16 +1336,18 @@
 +%0A      
+  
 'Utilize
@@ -1404,16 +1404,18 @@
 +%0A      
+  
 'Ex: 100
@@ -1421,16 +1421,22 @@
 000.50'%0A
+    %7D%0A
   %7D%0A  re

improve goal value validation #814