/* eslint-disable no-undef, react/prop-types, react/react-in-jsx-scope, react/jsx-no-undef */

const ArrowRight = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 24 24'><path fill='none' d='M0,0h24v24H0V0z' /><path d='M16.6,12l-8.2,8.2c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8L15,12L7.6,4.6C7.4,4.4,7.4,4,7.6,3.8 c0.2-0.2,0.6-0.2,0.8,0L16.6,12z' /> </svg>

const errorEmail = 'error@test.com'
const placeholder = 'Escribe tu email'
const title = 'Recibe todas las novedades'
const successStyles = {
  color: '#2ecc71',
  marginBottom: 0
}
const errorStyles = {
  color: '#d92b2b',
  fontSize: '12px',
  marginTop: '4px',
  marginBottom: '0'
}
const helpStyles = {
  color: '#bbbbbb',
  fontSize: '12px',
  marginTop: '10px',
  marginBottom: '0'
}
const responseList = {
  ok: () => (
    <p style={successStyles}>Hello! This is a success message</p>
  ),
  ko: () => (
    <p style={errorStyles}>This is an error message</p>
  )
}

class MyCardSubscription extends React.Component {
  constructor (...args) {
    super(...args)
    this.state = {
      responseContent: null
    }
    this._handleSubmit = this._handleSubmit.bind(this)
  }

  _handleSubmit (value) {
    this.setState({
      responseContent: value === errorEmail ? responseList.ko : responseList.ok,
      responseError: value === errorEmail
    })
  }

  render () {
    return (
      <div>
        <CardSubscription
          iconButton={ArrowRight}
          onSubmit={this._handleSubmit}
          placeholder={placeholder}
          responseContent={this.state.responseContent}
          responseError={this.state.responseError}
          title={title}
          checkboxName='terms-of-use'
          checkboxLabel='I accept the terms of use.'
          checkboxErrorMessage='Need to check the terms of use before sending your email.'
        />
        <p style={helpStyles}>Use '{errorEmail}' to show the error message, or  any other email address to submit the form.</p>
      </div>
    )
  }
}

return (<MyCardSubscription />)
