/**
 * CrawlApplyForm component
 *
 * Generated by coz on 2017-01-07,
 * from a template provided by apeman-asset-templates.
 *
 * @function CrawlApplyForm
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import { clone } from 'asobj'
import {
  ApForm,
  ApFieldSet,
  withForm
} from 'apeman-react-basic'
import ValueField from '../fields/value_field'
import SubmitField from '../fields/submit_field'
import ThreadPanel from '../panels/thread_panel'
import PostList from '../lists/post_list'
import ColorSelectField from '../fields/color_select_field'
import ThreadDetailStyle from '../styles/thread_detail_style'
import { ThreadColorCodes } from 'ore-fol-codes'

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

/** @lends CrawlApplyForm */
const CrawlApplyForm = (props) => {
  let {
    crawl,
    labels,
    idOf,
    onUpdate,
    values,
    onSubmit,
    errorList,
    errorStyle
  } = props
  let formProps = clone(props, {
    without: [
      'onUpdate',
      'onCancel',
      'errors',
      'labels',
      'crawl'
    ]
  })
  let { thread, posts } = crawl.content
  let colors = Object.keys(ThreadColorCodes).map((name) => ThreadColorCodes[ name ])
  return (
    <ApForm { ...formProps }
            centered
            className='crawl-apply-form'>
      <ApFieldSet plain>
        { errorList }
        { errorStyle }
        <ColorSelectField id={ idOf('color') }
                          label={ labels.color }
                          name='color'
                          value={ values.color || colors[ 0 ] }
                          onUpdate={ onUpdate }
                          options={ colors }
        />
        <ValueField id={ idOf('preview')}
                    label={ labels.preview }
        >
          <div className="crawl-preview-container">
            <div className="crawl-preview"
                 id={ `crawl-preview-${thread.uuid}` }
            >
              <ThreadDetailStyle prefix={ `#crawl-preview-${thread.uuid}` }
                                 color={ values.color || thread.color }
              />
              <ThreadPanel thread={ thread }
                           editable={ false }
                           tagValues={ [] }
                           destroyable={ false }
              />
              <PostList simple
                        wrap
                        posts={ posts.map((post) => Object.assign(post, { id: post.uuid })) }
              />
            </div>
          </div>
        </ValueField>

        <br/>
        <SubmitField id={ idOf('submit')}
                     label={ labels.submit }
                     onSubmit={ onSubmit }
                     values={ values }
        />
      </ApFieldSet>
    </ApForm>
  )
}

export default withForm(CrawlApplyForm)