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

const styles = {

}

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

      <button type='button' className='btn bg-secondary text-white' data-toggle='modal' data-target='#editPersonalInfo'>Edit</button>
      <form onSubmit={props.SubmitForm}>
        <div className='modal fade' id='editPersonalInfo' 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='Personal Information'>Personal Information</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='dispalyNameInput' className='col-sm-4 col-form-label'>Display Name</label>
                  <div className='col-sm-8'>
                    <input type='text' className='form-control' id='dispalyNameInput' aria-describedby='displayName' placeholder='Enter display name' value={props.DisplayName} onChange={props.UpdateDisplayName} />
                  </div>
                </div>
                <div className='form-group row'>
                  <label htmlFor='phoneNum' className='col-sm-4 col-form-label'>Phone Number</label>
                  <div className='col-sm-8'>
                    <input type='text' className='form-control' id='phoneNum' aria-describedby='userPhoneNum' placeholder='Enter phone number' value={props.PhoneNumber} onChange={props.UpdatePhoneNum} />
                  </div>
                </div>
              </div>

              <div className='modal-footer'>
                <button type='button' className='btn btn-secondary' data-dismiss='modal'>Close</button>
                <button type='submit' className='btn btn-primary'>Save changes</button>
              </div>

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

ModalV.propTypes = {
  DisplayName: PropTypes.string,
  PhoneNumber: PropTypes.string,
  UpdateDisplayName: PropTypes.func,
  UpdatePhoneNum: PropTypes.func,
  SubmitForm: PropTypes.func
}

export default injectSheet(styles)(ModalV)
