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

/* IMPORT COMPONENTS */
import NotificationFeedC from '../../components/NotificationFeedC'
import ProfileImageC from '../../components/ProfileImageC'
import ModalV from './components/ModalV'

const styles = {
  myContainer: {
    margin: {
      top: 30,
      right: 50,
      bottom: 25,
      left: 50
    }
  },
  myParagraph: {
    color: 'red'
  },
  /* For these two backgrounds you'll want to delete the backgroundColor and left padding */
  firstBoxBackground: {
    padding: {
      top: 10,
      right: 0,
      bottom: 10,
      left: 10
    }
  },
  secondBoxBackground: {
    padding: {
      top: 10,
      right: 0,
      bottom: 15,
      left: 10
    }
  }
}

const ProfileV = (props) => {
  return (
    <div className={props.classes.myContainer}>
      <div className='row'>
        <div className='col-md-6'>
          {/* TODO WE NEED TO PASS AN ATTRIBUTE WITH THE S3 BUCKET LINK TO THIS COMPONENT SO IT CAN DYNALMICALLY RENDER THE PROPER USER IMAGE */}
          {/* MAYBE HAVE A DEFAULT ONE THAT WILL RENDER UNTILL THEY UPLOAD A NEW IMAGE */}
          <ProfileImageC picWidth={220} picHeight={297} />

        </div>
        <div className='col-md-6'>
          {/* BOX TO DISPLAY THE USERS NAME AND POSITION THESE TWO FIELDS ARE IMUTABLE TO THE USER BUT ADMIN CAN CHANGE */}
          <div className={`container-fluid ${props.classes.firstBoxBackground}`}>
            <div className='row'>
              <h4>{props.name}</h4>
            </div>
            <div className='row'>
              <h5>{props.position}</h5>
            </div>
          </div>
          {/* BOX TO DISPLAY PERSONAL INFORMATION EMAIL IS IMUTABLE TO USER BUT NOT TO ADMIN AND DISPLAY NAME AND PHONE NUMBER IS MUTABLE TO USER */}
          <div className='row'>
            <div className={`container-fluid ${props.classes.secondBoxBackground}`}>
              <h4>Personal Information</h4>

              <div className='form-group row'>
                <label htmlFor='emailInput' className='col-sm-3 col-form-label'>Email</label>
                <div className='col-sm-9'>
                  <input type='email' className='form-control' id='emailInput' aria-describedby='emailHelp' placeholder='Enter email' value={props.email} readOnly />
                </div>
              </div>

              <div className='form-group row'>
                <label htmlFor='dispalyNameInput' className='col-sm-3 col-form-label'>Display Name</label>
                <div className='col-sm-9'>
                  <input type='text' className='form-control' id='dispalyNameInput' aria-describedby='displayName' placeholder='Enter display name' value={props.displayName} readOnly />
                </div>
              </div>

              <div className='form-group row'>
                <label htmlFor='phoneNum' className='col-sm-3 col-form-label'>Phone Number</label>
                <div className='col-sm-9'>
                  <input type='text' className='form-control' id='phoneNum' aria-describedby='userPhoneNum' placeholder='Enter phone number' value={props.phoneNum} readOnly />
                </div>
              </div>

              {/* Modal to edit the form information */}
              <ModalV DisplayName={props.displayName}
                PhoneNumber={props.phoneNum}
                UpdateDisplayName={props.changeDisplayName}
                UpdatePhoneNum={props.changePhoneNum}
                SubmitForm={props.submitForm} />
            </div>
          </div>

        </div>
      </div>
      <div className='row'>
        <NotificationFeedC />
      </div>
    </div>
  )
}

ProfileV.propTypes = {
  name: PropTypes.string,
  position: PropTypes.string,
  email: PropTypes.string,
  displayName: PropTypes.string,
  phoneNum: PropTypes.string,
  changeDisplayName: PropTypes.func,
  changePhoneNum: PropTypes.func,
  submitForm: PropTypes.func,
  classes: PropTypes.object
}

export default injectSheet(styles)(ProfileV)
