import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'

const styles = {
  textArea: {
    textAlign: 'center'
  },
  inputContainer: {
    margin: '2em'
  },
  requiredWrapper: {
    margin: '3em'
  }
}
// TODO: change asignee to accept only numbers as input
const ItemTemplateV = (props) => {
  return (
    <div className='animated fadeInUp'>
      <div className='row'>
        <div className={`col-md-6 ${props.classes.textArea}`}>
          <h2>Item Type:</h2>
          <h3>{props.type}</h3>
        </div>
        <div className={`col-md-6 ${props.classes.textArea}`}>
          <h2>Item Subtype:</h2>
          <h3>{props.subtype}</h3>
        </div>
      </div>
      <form onSubmit={props.submit}>
        <div className={`${props.classes.requiredWrapper}`}>
          <div className='row'>
            <div className='col-md-4'>
              <label>Matter Name</label>
              <input type='text' className='form-control' placeholder='Enter a name...' value={props.name} onChange={props.changeName} />
            </div>
            <div className='col-md-4'>
              <label>Matter Title</label>
              <input type='text' className='form-control' placeholder='Enter a title...' value={props.title} onChange={props.changeTitle} />
            </div>
            <div className='col-md-4'>
              <label>Contract Number</label>
              <input type='text' className='form-control' placeholder='Enter a contract...' value={props.contract} onChange={props.changeContract} />
            </div>
            <div className='col-md-4'>
              <label>Assignee</label>
              <input type='text' className='form-control' placeholder='Enter an assignee...' value={props.assignee} onChange={props.changeAssignee} />
            </div>
            <div className='col-md-4'>
              <label>Priority</label>
              <div className={`dropdown ${props.classes.centerText}`}>
                <select onChange={props.changePriority}>
                  <option value='LOW'>LOW</option>
                  <option selected="selected" value='MED'>MED</option>
                  <option value='HIGH'>HIGH</option>
                  <option value='VERY HIGH'>VERY HIGH</option>
                </select>
              </div>
            </div>
            <div className='col-md-4'>
              <label>Deadline</label>
              <input type='text' className='form-control' placeholder='YYYY-MM-DD' value={props.deadline} onChange={props.changeDeadline} />
            </div>
          </div>
        </div>
        <div className='form-group'>
          <div className='row'>
            {
              props.sections.map((item, i) => {
                return (
                  <div className='col-md-12'>
                    <div className={`${props.classes.inputContainer}`}>
                      <h4>{item}</h4>
                      <textarea type='text' onChange={(e) => props.generic(i, e)} value={props.filledSections[i] || ''} className='form-control' rows='3' />
                    </div>
                  </div>
                )
              })
            }
            <div className={`col-md-12 ${props.classes.textArea}`}>
              <button type='submit' className={`btn btn-primary ${props.classes.buttonCSS}`}>Submit</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}

ItemTemplateV.propTypes = {
  type: PropTypes.string,
  subtype: PropTypes.string,
  sections: PropTypes.array,
  name: PropTypes.string,
  title: PropTypes.string,
  contract: PropTypes.string,
  assignee: PropTypes.string,
  priority: PropTypes.string,
  deadline: PropTypes.string,
  generic: PropTypes.func,
  changeName: PropTypes.func,
  changeTitle: PropTypes.func,
  changeContract: PropTypes.func,
  changeAssignee: PropTypes.func,
  changePriority: PropTypes.func,
  changeDeadline: PropTypes.func,
  filledSections: PropTypes.array,
  submit: PropTypes.func,
  classes: PropTypes.object
}

export default injectSheet(styles)(ItemTemplateV)
