import React, { Component } from 'react'
import ProfileV from './ProfileV'
import axios from 'axios'

/* INFORMATION THAT DEFINES A USER PROFILE
This is an example of the information i would need when the users goes to the profile page
DATA = {
  id: ''                          // imutbale
  name: 'Carlos A. Gimenez'       // imutable
  role: 'Mayor'                   // imutable
  email: 'mayor@miamidade.gov',   // imutable
  displayName: 'Pepito Gimenez',  // mutable
  phoneNum: '305-375-1224'        // mutable
}
*/

class ProfileC extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // Maybe S3 Link to users profile picture
      // profilePIC: '',
      name: '',
      position: '',
      email: '',
      displayName: '',
      phoneNum: '',
      notificationFeed: 'I will leave this one empty for now'
    }
  }

  componentDidMount () {
    let URL = `http://localhost:4000/api/users/${sessionStorage.getItem('userID')}`
    axios.get(URL)
      .then(res => {
        console.log(res)
        const DATA = res.data
        this.setState({
          name: `${DATA.ufname} ${DATA.ulname}`,
          position: DATA.uposition,
          email: DATA.uemail,
          displayName: DATA.udisplay,
          phoneNum: DATA.uphone
        })
      })
  }

  onChangeDisplayName = (evt) => {
    this.setState({
      displayName: evt.target.value
    })
  }

  onChangePhoneNum = (evt) => {
    this.setState({
      phoneNum: evt.target.value
    })
  }

  submitForm = (evt) => {
    evt.preventDefault()
    let data = {
      displayName: this.state.displayName,
      phoneNum: this.state.phoneNum
    }
    let URL = `http://localhost:3000/api/users/login`
    axios.post(URL, { data })
      .then(res => {
        console.log(res)
      })
  }

  render () {
    return (
      <ProfileV name={this.state.name}
        position={this.state.position}
        email={this.state.email}
        displayName={this.state.displayName}
        phoneNum={this.state.phoneNum}
        changeDisplayName={this.onChangeDisplayName}
        changePhoneNum={this.onChangePhoneNum}
        submitForm={this.submitForm} />
    )
  }
}

export default ProfileC
