account_code_modal.jsx

/* global $ */

'use strict'

import React, {Component} from 'react'
import {connect} from 'react-redux'
import ReactDOM from 'react-dom'
import {findDOMNode} from 'react-dom'
import {Modal, ModalHeader, ModalBody, ModalFooter, Collapse, Button, FormGroup, FormText, Label, Input} from 'reactstrap'
import {assign} from 'lodash'
import {bind} from 'decko'

import * as actions from '../actions'
import AccountCodeSelect from './account_code_select'

@connect((state) => ({
  accountCodes: state.present.get('account_codes').toJS()
}))
export class AccountCodeModal extends Component {
  constructor (props) {
    super(props)
    this.state = {accountCode: assign({}, props.accountCode)}
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.isOpen) {
      this.setState({accountCode: assign({}, nextProps.accountCode)})
    }
  }

  componenDidMount() {
    Console.log("ASSHOLE")
    this.handlePopoverToggle()
  }

  @bind
  handleOpened () {
    const {accountCode} = this.state
    const {editForm, recodeForm} = this.refs
    const $editForm = $(ReactDOM.findDOMNode(editForm))
    const $recodeForm = $(ReactDOM.findDOMNode(recodeForm))

    $editForm.parsley()
    $editForm.find('input').first().focus()
    $recodeForm.parsley()
  }

  @bind
  handleSubmit (event) {
    event.preventDefault()

    if (!$(event.target).parsley().isValid()) return

    const {accountCode} = this.state
    const {accountCodes, mode, dispatch, onToggle} = this.props
    const $codeInput = $('input#code').parsley()

    const duplicate = accountCodes
      .filter((_, index) => index !== accountCode.index)
      .find(({code}) => code.trim() === accountCode.code.trim())

    if (duplicate) {
      $codeInput.removeError('duplicatedCode')
      return $codeInput.addError('duplicatedCode', {message: 'Code should be unique.'})
    } else {
      $codeInput.removeError('duplicatedCode')
    }

    switch (mode) {
      case 'EDIT':
        dispatch(actions.ChangeAccountCode(accountCode))
        break

      case 'NEW':
        dispatch(actions.NewAccountCodeAction(accountCode))
        break
    }

    onToggle()
  }

  @bind
  handleRecodeSubmit (event) {
    event.preventDefault()

    if (!$(event.target).parsley().isValid()) return

    const {accountCode} = this.state
    const {dispatch, onToggle} = this.props

    dispatch(actions.DeleteAccountCode(accountCode))
    onToggle()
  }

  @bind
  handleInputChange ({target}) {
    const value = target.value && target.dataset.asCents ? target.value * 100 : target.value

    this.setState({
      accountCode: assign({}, this.state.accountCode, {
        [target.name]: value,
        [`${target.name}_changed`]: this.props.accountCode[target.dataset.comparator || target.name] !== value
      })
    })
  }

  @bind
  handleLocalDelete () {
    const {accountCode} = this.state
    const {dispatch, onToggle} = this.props
    const {modal} = this.refs

    onToggle()

    setTimeout(() => {
      dispatch(actions.RemoveAccountCodeAction(accountCode))
    }, modal.props.modalTransition.timeout)
  }

  @bind
  handleRecodeToggle () {
    this.setState({
      accountCode: assign({}, this.state.accountCode, {
        deleted: true
      })
    })
  }

  @bind
  handleRecodeSelect (id) {
    this.setState({
      accountCode: assign({}, this.state.accountCode, {
        replaced_by: id
      })
    })
  }

  @bind
  handleRestore () {
    this.setState({
      accountCode: assign({}, this.state.accountCode, {
        deleted: false,
        replaced_by: null,
        recoded_id: null,
        amount_cents: this.state.accountCode.approved_amount_cents,
        amount_cents_changed: false
      })
    })
  }

  @bind
  handlePopoverToggle () {
    const po = findDOMNode(this.refs.popover)
    Console.log(po)
    $(po).popover()
  }

  renderHeader () {
    const {mode, onToggle, accountCode} = this.props

    return (
      <ModalHeader toggle={onToggle}>
        {mode === 'EDIT' && `Editing ${accountCode.code}`}
        {mode === 'NEW' && 'New Account Code'}
      </ModalHeader>
    )
  }

  render () {
    const {accountCode} = this.state
    const {isOpen, onToggle, accountCodes, mode} = this.props

    return (
      <Modal size='lg' isOpen={isOpen} toggle={onToggle} onOpened={this.handleOpened} ref='modal'>
        {this.renderHeader()}
        <Collapse isOpen={!accountCode.deleted}>
          <form onSubmit={this.handleSubmit} ref='editForm'>
            <ModalBody>
              <div className='row'>
                <div className='col-3'>
                  <FormGroup>
                    <Label for='code'>
                      Code
                    </Label>
                    <Input
                      type='text'
                      name='code'
                      id='code'
                      placeholder='Required'
                      value={accountCode.code}
                      onChange={this.handleInputChange}
                      required
                    />
                  </FormGroup>
                </div>
                <div className='col-9'>
                  <FormGroup>
                    <Label for='label'>
                      Description
                    </Label>
                    <Input
                      type='text'
                      name='label'
                      id='label'
                      placeholder='Required'
                      value={accountCode.label}
                      onChange={this.handleInputChange}
                      required
                    />
                  </FormGroup>
                </div>
                <div className='col-6'>
                  <FormGroup>
                    <Label for='category'>
                      Category
                    </Label>
                    <Input
                      type='text'
                      name='category'
                      id='category'
                      placeholder='Required'
                      value={accountCode.category}
                      onChange={this.handleInputChange}
                      required
                    />
                    <FormText color='muted'>
                      Use a forward slash character to create nested categories.
                    </FormText>
                  </FormGroup>
                </div>
              </div>
            </ModalBody>
            <ModalFooter>
              {mode === 'EDIT' && (
                <Button
                  color='danger'
                  className='mr-auto'
                  type='button'
                  onClick={accountCode.added ? this.handleLocalDelete : this.handleRecodeToggle}
                >
                  <i className='fa fa-trash-alt' /> Delete
                </Button>
              )}
              <Button color='primary' type='submit'>
                {mode === 'EDIT' && 'Apply Changes'}
                {mode === 'NEW' && 'Save'}
              </Button>
              <Button color='secondary' type='button' onClick={onToggle}>
                Cancel
              </Button>
            </ModalFooter>
          </form>
        </Collapse>
        <Collapse isOpen={accountCode.deleted}>
          <form onSubmit={this.handleRecodeSubmit} ref='recodeForm'>
            <ModalBody>
              <FormGroup>
                <Label for='recode'>
                  Recode deleted account code to
                  <i className='fa fa-question-circle m-1' ref="popover" role="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Any existing project records or new project records created before this draft budget is approved will be recoded from this deleted account code to the selected account code. This recode of project records will occur when this draft budget has been approved by all required users and is changed from a draft to approved status."/>
                </Label>
                <AccountCodeSelect
                  codes={accountCodes}
                  recode={this.handleRecodeSelect}
                  selected_value={accountCode.recoded_id}
                  exclude_id={accountCode.id}
                  inputProps={{
                    'data-parsley-required': true
                  }}
                />
              </FormGroup>
            </ModalBody>
            <ModalFooter>
              <Button color='success' className='mr-auto' type='button' onClick={this.handleRestore}>
                <i className='fa fa-trash-alt' /> Undelete
              </Button>
              <Button color='primary' type='submit'>
                Apply Changes
              </Button>
              <Button color='secondary' type='button' onClick={onToggle}>
                Cancel
              </Button>
            </ModalFooter>
          </form>
        </Collapse>
      </Modal>
    )
  }
}