/**
 * SignupForm component
 *
 * Generated by coz on 8/17/2016,
 * from a template provided by apeman-asset-templates.
 *
 * @class SignupForm
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import { ApSignupForm } from 'apeman-react-handy'
import { ApCheckbox } from 'apeman-react-basic'

import { clone } from 'asobj'
import OtherViewLink from '../links/other_view_link'
import classnames from 'classnames'

const debug = defineDebug('project:fragment:signup-form')

/** @lends SignupForm */
const SignupForm = (props) => {
  let {
    errors,
    labels,
    placeholders,
    captchaImage,
    onSubmit,
    values = {}
  } = props
  let images = {
    captcha: captchaImage
  }
  let formProps = clone(props, {
    without: [
      'l',
      'captchaImage',
      'labels',
      'onSubmit',
      'values'
    ]
  })

  let [ agreePrefix, agreeSuffix ] = l('labels.AGREE_ON_TERM').split('/')
  return (
    <ApSignupForm { ...formProps }
                  centered
                  className='signup-form'
                  onSubmit={ () => onSubmit(values) }
                  labels={ labels }
                  placeholders={ placeholders }
                  images={ images }
                  errors={ errors }
    >
      <SignupForm.TermField checked={ values.agreeChecked }
                            onUpdate={ props.onUpdate }
      >
        <span>
          <span>{ agreePrefix }</span>
          <OtherViewLink className='signup-term-link'
                         view="AboutTermOfUse"
                         target="_blank"
          >{ labels.term }</OtherViewLink>
          <span>{ agreeSuffix }</span>
        </span>
      </SignupForm.TermField>
    </ApSignupForm>
  )
}

Object.assign(SignupForm, {
  TermField: ({
    checked = false,
    onUpdate,
    children
  }) => (
    <div className="signup-term-field">
      <div className="signup-term-check-wrap">
        <ApCheckbox id="signup-agree-check"
                    checked={ checked }
                    name="agreeChecked"
                    onChange={ ({ target }) => onUpdate({ agreeChecked: target.checked })}
                    title={ children }
        />
      </div>
    </div>
  )
})

export default SignupForm