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

const styles = {

}

const SearchModal = (props) => {
  return (
    <div>

      <button type='button' className='btn bg-success text-white' data-toggle='modal' data-target='#advancedSearchForm'>Filter</button>
      <div className='modal fade' id='advancedSearchForm' tabIndex='-1' role='dialog' aria-labelledby='Personal Information' aria-hidden='true'>
        <div className='modal-dialog modal-dialog-centered' role='document'>
          <div className='modal-content'>
            <div className='modal-header'>
              <h5 className='modal-title' id='Advanced Search'>Advanced Search</h5>
              <button type='button' className='close' data-dismiss='modal' aria-label='Close'>
                <span aria-hidden='true'>&times;</span>
              </button>
            </div>

            <div className='modal-body'>
              <div className='form-group row'>
                <label htmlFor='assigneeInput' className='col-sm-4 col-form-label'>Assignee:</label>
                <div className='col-sm-8'>
                  <input type='text' className='form-control' id='assigneeInput' aria-describedby='displayName'
                    placeholder='Assignee Name ' value={props.assignee} onChange={props.changeAssignee} />
                </div>
              </div>
              <div className='form-group row'>
                <label htmlFor='titleInput' className='col-sm-4 col-form-label'>Title:</label>
                <div className='col-sm-8'>
                  <input type='text' className='form-control' id='titleInput' aria-describedby='displayName'
                    placeholder='Matter title ' value={props.title} onChange={props.changeTitle} />
                </div>
              </div>
              <div className='form-group row'>
                <label htmlFor='deadlineInput' className='col-sm-4 col-form-label'>Deadline:</label>
                <div className='col-sm-8'>
                  <input type='text' className='form-control' id='deadlineInput' aria-describedby='displayName'
                    placeholder='YYYY-MM-### ' value={props.deadline} onChange={props.changeDeadline} />
                </div>
              </div>
              <div className='form-group row'>
                <label htmlFor='contractInput' className='col-sm-4 col-form-label'>Contract No.</label>
                <div className='col-sm-8'>
                  <input type='text' className='form-control' id='contractInput' aria-describedby='displayName'
                    placeholder='Contract Num. ' value={props.contract} onChange={props.changeContract} />
                </div>
              </div>
              <div className='form-group row'>
                <label htmlFor='subtypeInput' className='col-sm-4 col-form-label'>Matter Type:</label>
                <div className='col-sm-8'>
                  <input type='text' className='form-control' id='subtypeInput' aria-describedby='displayName'
                    placeholder='Type ' value={props.subtype} onChange={props.changeSubtype} />
                </div>
              </div>
              <div className='form-group row'>
                <label htmlFor='lastEditorInput' className='col-sm-4 col-form-label'>Last to Edit:</label>
                <div className='col-sm-8'>
                  <input type='text' className='form-control' id='lastEditorInput' aria-describedby='displayName'
                    placeholder='Last Editor Name ' value={props.lastEditor} onChange={props.changeLastEditor} />
                </div>
              </div>
            </div>
            <div className='modal-footer'>
              <button type='button' data-dismiss='modal' className='btn btn-primary' onClick={props.clickSearch}>Search</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  )
}

SearchModal.propTypes = {
  changeLastEditor: PropTypes.func,
  lastEditor: PropTypes.string,
  changeAssignee: PropTypes.func,
  assignee: PropTypes.string,
  changeTitle: PropTypes.func,
  title: PropTypes.string,
  changeDeadline: PropTypes.func,
  deadline: PropTypes.string,
  changeContract: PropTypes.func,
  contract: PropTypes.string,
  changeSubtype: PropTypes.func,
  subtype: PropTypes.string,
  clickSearch: PropTypes.func
}

export default injectSheet(styles)(SearchModal)
