18F/culper

import React from 'react'
import { i18n } from '../../../../config'
import {
  ValidationElement,
  Show,
  BranchCollection,
  DateRange,
  Text,
  Field,
  AccordionItem
} from '../../../Form'

export default class AdditionalActivity extends ValidationElement {
  constructor(props) {
    super(props)
    this.updateBranch = this.updateBranch.bind(this)
  }

  updateBranch(values) {
    this.props.onUpdate({
      ...values
    })
  }

  render() {
    const klass = `activity ${this.props.className || ''}`.trim()

    return (
      <div className={klass}>
        <BranchCollection
          label={i18n.t('history.employment.default.additionalActivity.label')}
          labelSize="h4"
          appendLabel={i18n.t(
            'history.employment.default.additionalActivity.collection.append'
          )}
          appendSize="h4"
          {...this.props || {}}
          onUpdate={this.updateBranch}
          onError={this.props.onError}
          scrollIntoView={this.props.scrollIntoView}>
          <AccordionItem
            scrollIntoView={this.props.scrollIntoView}
            required={this.props.required}>
            <Field
              title={i18n.t(
                'history.employment.default.additionalActivity.position.label'
              )}
              titleSize="h4"
              adjustFor="labels"
              scrollIntoView={this.props.scrollIntoView}>
              <Text
                name="Position"
                className="text"
                bind={true}
                required={this.props.required}
              />
            </Field>

            <Field
              title={i18n.t(
                'history.employment.default.additionalActivity.supervisor.label'
              )}
              titleSize="h4"
              adjustFor="labels"
              scrollIntoView={this.props.scrollIntoView}>
              <Text
                name="Supervisor"
                className="text"
                bind={true}
                required={this.props.required}
              />
            </Field>

            <Field
              title={i18n.t(
                'history.employment.default.additionalActivity.heading.datesEmployed'
              )}
              titleSize="h4"
              help="history.employment.default.additionalActivity.datesEmployed.help"
              adjustFor="daterange"
              shrink={true}
              scrollIntoView={this.props.scrollIntoView}>
              <DateRange
                name="DatesEmployed"
                bind={true}
                minDateEqualTo={true}
                dateRangePrefix="additionalActivity"
                maxDate={this.props.employmentFromDate}
                maxDateEqualTo={true}
                allowPresent={false}
                required={this.props.required}
              />
            </Field>
          </AccordionItem>
        </BranchCollection>
      </div>
    )
  }
}

AdditionalActivity.defaultProps = {
  List: {},
  employmentFromDate: {
    month: `${new Date().getMonth() + 1}`,
    day: `${new Date().getDate()}`,
    year: `${new Date().getFullYear()}`
  },
  onUpdate: queue => {},
  onError: (value, arr) => {
    return arr
  }
}