/**
 * CommentForm component
 *
 * Generated by coz on 2016-12-30,
 * from a template provided by apeman-asset-templates.
 *
 * @function CommentForm
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import { clone } from 'asobj'
import {
  ApForm,
  ApText,
  ApButton,
  withForm
} from 'apeman-react-basic'

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

/** @lends CommentForm */
const CommentForm = (props) => {
  let {
    values,
    labels,
    placeholders = {},
    idOf,
    onUpdate,
    onSubmit,
    errorList,
    errorStyle
  } = props
  let formProps = clone(props, {
    without: [ 'onUpdate', 'onCancel', 'errors', 'labels', 'placeholders' ]
  })
  return (
    <ApForm { ...formProps }
            centered
            className='comment-form'>
      { errorList }
      { errorStyle }
      <div className="comment-form-row">
        <div className="comment-form-col">
          <ApText id={ idOf('text') }
                  name='text'
                  value={ values.text }
                  rows={ 2 }
                  placeholder={ placeholders.text }
                  onChange={ (e) => onUpdate({ text: e.target.value }) }
          />
        </div>
        <div className="comment-form-col">
          <ApButton id={ idOf('submit')}
                    onTap={ () => onSubmit(values) }
                    values={ values }
                    primary
          >{ labels.submit }</ApButton>
        </div>
      </div>
    </ApForm>
  )
}

export default withForm(CommentForm)