import React from 'react'
import Notifications from 'app/containers/profile/notifications'
import PasswordChange from './password_change'
import gravatar from 'gravatar'
import EditUser from 'app/components/settings/user/edit'
import Restricted from 'app/restricted'

let Profile = React.createClass({
  getInitialState(){
    return {
      modal: undefined
    }
  },
  handleSubmit(){
    console.log("Submit %o",this.state)
    this.props.onSubmit(this.state)
  },
  handleUpdate(section, data){
    this.setState({ [section]: data })
  },
  openPasswordChange(ev){
    ev.preventDefault()
    this.setState({ modal: "change_password" })
  },
  openPersonalData(ev){
    ev.preventDefault()
    this.setState({ modal: "personal_data" })
  },
  render(){
    let popup=[]
    switch(this.state.modal){
      case "change_password":
        popup=(
          <PasswordChange onClose={() => this.setState({ modal: undefined })}/>
        )
      break;
      case "personal_data":
        popup=(
          <EditUser
            user={this.props.user}
            onClose={() => this.setState({ modal: undefined })}
            onSubmit={this.props.onUpdateUser}
            />
        )
      break;
    }
    let props = this.props
    const gravatar_url=gravatar.url(props.user.email, {s: 300})

    return (
      <div className="ui central area white background" style={{flexDirection: "column"}}>
        <div className="ui top secondary menu">
         <div className="right menu">
            <a className="item" href="#" onClick={this.openPersonalData}><i className="ui icon user"/>Personal data</a>
            <a className="item" href="#" onClick={this.openPasswordChange}><i className="ui icon lock"/>Change password</a>
          </div>
        </div>
        <div className="ui text container">
          <div style={{float:"left", margin: "0px 30px 30px 0"}}>
            <img src={gravatar_url} className="ui bordered image medium" style={{width: 300, height: 300}}/>
            <div className="ui meta">Image from <a href="https://gravatar.com" target="_blank" rel="noreferrer">Gravatar</a>.</div>
          </div>
          <h1 className="ui header">{props.user.name}</h1>
          <h2 className="ui header">Basic user data</h2>
            <div className="ui inline field">
              <label>Email:</label> <span className="value">{props.user.email}</span>
            </div>
          <div style={{clear:"both"}}/>

          <Notifications user={props.user.email}
            onUpdate={(data) => this.handleUpdate("notifications", data)}/>

          <br/>
          <Restricted perm="settings.user.update">
            <button className="ui yellow button" onClick={this.handleSubmit}>Update profile</button>
          </Restricted>
        </div>
        {popup}
      </div>
    )
  }
})

export default Profile

@@ -135,40 +135,8 @@
 ge'%0A
-import gravatar from 'gravatar'%0A
 impo
@@ -227,16 +227,137 @@
 tricted'
+%0Aconst default_avatar=require('../../../imgs/square-favicon.svg')%0Aimport Flash from 'app/flash'%0Aimport rpc from 'app/rpc'
 %0A%0Alet Pr
@@ -440,16 +440,46 @@
 ndefined
+,%0A      avatar: default_avatar
 %0A    %7D%0A 
@@ -858,16 +858,543 @@
 %7D)%0A  %7D,%0A
+  componentDidMount()%7B%0A    rpc.call(%22settings.user.get%22, %5B%22profile_avatar%22%5D).then( (d) =%3E %7B%0A      if (d && d.avatar)%0A        this.setState(%7Bavatar: d.avatar%7D)%0A    %7D ).error( (e) =%3E console.log(e) )%0A  %7D,%0A  uploadAvatar(ev)%7B%0A    let fr = new FileReader()%0A    fr.onload = (ev) =%3E %7B%0A      this.setState(%7Bavatar: ev.target.result%7D)%0A      rpc.call(%22settings.user.set%22, %5B%22profile_avatar%22, %7Bavatar: ev.target.result%7D%5D).then( () =%3E %7B%0A        Flash.info(%22Avatar image saved%22)%0A      %7D)%0A    %7D%0A    fr.readAsDataURL(ev.target.files%5B0%5D)%0A  %7D,%0A
   render
@@ -1859,90 +1859,29 @@
 let 
+%7B
 props
- = this.props%0A    const gravatar_url=gravatar.url(props.user.email, %7Bs: 300%7D)
+, state%7D = this
 %0A%0A  
@@ -2480,20 +2480,20 @@
 rc=%7B
-gr
+state.
 avatar
-_url
 %7D cl
@@ -2602,96 +2602,151 @@
 meta
-%22%3EImage from %3Ca href=%22https://gravatar.com%22 target=%22_blank%22 rel=%22noreferrer%22%3EGravatar%3C/a
+ blue text%22%3E%3Clabel style=%7B%7Bcursor:%22pointer%22%7D%7D%3EUpload new image%3Cinput onChange=%7Bthis.uploadAvatar%7D style=%7B%7Bdisplay:%22none%22%7D%7D type=%22file%22/%3E%3C/label
 %3E.%3C/

Use user data to store user avatar