form

define ['react'
        'dom'
        'underscore'
        'ui/forms/text_field'
        'ui/forms/field_set'
        'ui/forms/textarea'
        'ui/forms/select'
        'ui/workflows/intro'
        'ui/workflows/workflow_forms/fields'
        'actions/workflow_templates'], (React
        D
        _
        TextField
        FieldSet
        Textarea
        Select
        Intro
        WorkflowFields
        WorkflowActions) ->

  WorkflowFormForm = React.createClass

    values: ->
      values =
        field_id: @refs.fieldId.value()
        title: @refs.title.value()
        description: @refs.description.value()
        workflow_fields_attributes: @refs.workflowFields.values()
      # one dropdown handles change_reasons / show_terminated_reasons
      changeReasonVal = @refs.changeReasonId.value()
      if changeReasonVal == 'terminated_reasons'
        values.change_reason_id = null
        values.show_terminated_reasons = true
      else
        values.change_reason_id = changeReasonVal
        values.show_terminated_reasons = false
      values

    changeReasonChoices: ->
      _.extend(
        {}
        @props.changeReasonChoices
        { 'terminated_reasons': 'Termination Reasons' }
      )

    changeReasonSelected: ->
      if @props.attrs.show_terminated_reasons
        'terminated_reasons'
      else
        @props.attrs.change_reason_id

    cachedFieldsWithoutDivision: null

    fieldsWithoutDivision: ->
      return @cachedFieldsWithoutDivision if @cachedFieldsWithoutDivision
      clone = _.clone(@props.companyFields)
      _.each(clone, (v, k) ->
        delete clone[k] if v == 'Company Division'
      )
      @cachedFieldsWithoutDivision = clone
      @cachedFieldsWithoutDivision

    # react
    propTypes:
      attrs: React.PropTypes.object.isRequired
      companyFields: React.PropTypes.object.isRequired
      workflowFields: React.PropTypes.array.isRequired
      changeReasonChoices: React.PropTypes.object.isRequired

    changeHandler: (e) ->
      # debugger
      @props.workflowFields.push(parseInt(e.target.value, 10))
      # WorkflowActions.removeField(
      #   parseInt(e.target.value, 10)
      # )

    render: ->
      D.div { className: 'workflow-template-form' }, [
        D.div { className: 'squeeze-10' }, [
          Intro(
            header: 'Form Builder'
            copy: [
              {
                text: 'The request process begins by creating a form for employees to submit a desired change. After entering a ‘Title’ and ‘Description’ select a primary field in order to start your form.'
              }
              {
                extraClass: 'secondary'
                text: 'A new form will automatically include the following fields: target employee, effective date, change reason, and notes.'
              }
            ]
          )
          FieldSet(
            inputs: [
              D.div {className: 'form-row'}, [
                TextField(
                  label: 'Form Title'
                  name: 'formTitle'
                  ref: 'title'
                  inputClass: 'full'
                  placeholder: 'Add a title for the requester to see'
                  value: @props.attrs.title
                  errors: try @props.attrs.meta.errors.title; catch e then []
                )
              ]
              D.div {className: 'form-row change-request-form-description'}, [
                Textarea(
                  label: 'Form Description'
                  name: 'formDescription'
                  ref: 'description'
                  inputClass: 'full'
                  placeholder: 'Add a description for the requester to see (optional)'
                  value: @props.attrs.description
                  errors: try @props.attrs.meta.errors.description; catch e then []
                )
              ]
            ]
          )
        ]
        D.hr {}
        D.div { className: 'squeeze-10' }, [
          D.p {}, [
            "Select a primary field to generate a form for the employees' desired change."
          ]
          FieldSet(
            inputs: [
              Select(
                label: 'Primary Field'
                name: 'formFieldId'
                ref: 'fieldId'
                options: @props.companyFields
                includeBlank: '- Select -'
                inputClass: 'half'
                handleChange: @changeHandler
                errors: try @props.attrs.meta.errors.field; catch e then []
                sort: true
              )
            ]
          )
        ]
        D.hr {}
        D.div { className: 'squeeze-10' }, [
          FieldSet(
            inputs: [
              D.p {},
                'Select a set of reasons for this change. Use change reason sets in company settings to add or edit these reasons.'
              Select(
                label: 'Reasons for Change'
                name: 'changeReasonId'
                ref: 'changeReasonId'
                options: @changeReasonChoices()
                selected: @changeReasonSelected()
                includeBlank: '- Select -'
                inputClass: 'half'
                errors: try @props.attrs.meta.errors.change_reason; catch e then []
              )
            ]
          )
        ]
        D.hr {}
        D.div { className: 'squeeze-10' }, [
          FieldSet(
            inputs: [
              D.p {}, 'If needed, additional fields can be included in relation to the primary field. When adding multiple fields you can drag them up or down to reorder them as desired.'
              D.p {
                className: 'hint'
              }, 'i.e. An employee changing their ‘Emergency Contact’ would likely need to change their ‘Emergency Contact Phone’ as well.'
              WorkflowFields(
                ref: 'workflowFields'
                fields: @props.workflowFields
                fieldOptions: @fieldsWithoutDivision()
              )
            ]
          )
        ]
      ]