content: import React from 'react'
  import { connect } from 'react-redux';
  
  import TextField from 'material-ui/TextField';
  import Paper from 'material-ui/Paper'
  import RaisedButton from 'material-ui/RaisedButton';
  import Toggle from 'material-ui/Toggle';
  import Avatar from 'material-ui/Avatar';
  import Divider from 'material-ui/Divider';
  import IconButton from 'material-ui/IconButton';
  import CloseIcon from 'material-ui/svg-icons/navigation/close';
  
  import { AvatarView } from '../../../shared/components/User'
  
  import mediaqueries from '../styles/mediaqueries.css'
  var styles = {
      container: {
          display: 'flex',
          flex: 1,
          flexDirection: 'row'
      },
      column: {
          display: 'flex',
          flex: 1,
          flexDirection: 'column'
      },
      leftColumn: {
          display: 'flex',
          flex: 1,
          flexDirection: 'column',
          alignItem: 'flex-start',
          justifyContent: 'flex-start'
      },
      rightColumn: {
          display: 'flex',
          flex: 1,
          flexDirection: 'column',
          alignItem: 'flex-end',
          justifyContent: 'flex-start'
      },
      fieldContainer: {
          display: 'flex',
          flexDirection: 'column',
  
          alignItems: 'center',
          textAlign: 'center'
      },
      guildContainer: {
          display: 'flex',
          flexDirection: 'column',
          padding: 5,
          alignItems: 'center',
          textAlign: 'center'
      },
      guildListItem: {
          display: 'flex',
          flexDirection: 'row'
      },
      guildText: {
          padding: '3px'
      },
      saveContainer: {
          paddingTop: '10px',
          paddingBottom: '10px'
      },
      toggle: {
          maxWidth: 250,
          margin: 8
      },
      leaveGuildButton: {
          backgroundColor: 'red',
  
          width: 30,
          height: 30,
          padding: 5,
      },
      leaveGuildButtonIcon: {
          width: 20,
          color: 'white',
          height: 20
      },
      avatarContainer: {
          padding: 10
      },
      infoSection: {
          padding: '10px',
          border: '1px solid black',
          backgroundColor: 'rgba(255,255,255,.05)',
          borderStyle: 'solid',
          borderColor: 'rgba(255,255,255,.15)'
      },
      infoSectionHeader: {
          color: '#fff'
      },
      infoSectionDetails: {
          color: 'rgba(255,255,255,.7)',
          padding: '10px'
      }
  
  }
  
  export default class ProfileView extends React.Component {
  
      constructor(props) {
          super(props);
  
  
          this.state = {
              user: props.user,
              currentPassword: "",
              changePassword: false
          }
  
          this._handleStateChange = this._handleStateChange.bind(this)
          this._renderLeftColumn = this._renderLeftColumn.bind(this)
          this._renderCenterColumn = this._renderCenterColumn.bind(this)
          this._renderRightColumn = this._renderRightColumn.bind(this)
          this._renderGuild = this._renderGuild.bind(this)
          this._handleChangePasswordToggle = this._handleChangePasswordToggle.bind(this)
          this._handleUserChange = this._handleUserChange.bind(this)
          this._leaveGuild = this._leaveGuild.bind(this)
          this._saveProfile = this._saveProfile.bind(this)
      }
  
      componentWillMount() {
  
          if (this.props.user.name == "") {
              this.props.router.replace('/');
          }
      }
  
      componentDidMount() {
  
      }
  
      render() {
  
          return (
              <div className='container' style = {{height: '100%'}}>
                  <div>
                      <div style={styles.infoSection}>
                          <h3> Profile</h3>
  
                          <div className="profileContainer">
  
  
                              {this._renderLeftColumn()}
                              {this._renderCenterColumn()}
  
                              {this._renderRightColumn()}
  
  
  
                          </div>
  
                          <div style={styles.saveContainer}>
  
                              <RaisedButton
                                  primary={true}
                                  onTouchTap={() => this._saveProfile()}
                                  label="Save" />
                          </div>
                      </div>
                  </div>
              </div>
          )
      }
  
      _renderLeftColumn() {
          return (
              <div className="column" style={styles.leftColumn}>
                  <div style={styles.fieldContainer}>
                      <Toggle
                          label="Change Password"
                          toggled={this.state.changePassword}
                          onToggle={this._handleChangePasswordToggle}
                          style={styles.toggle}
                          />
                  </div>
              </div>
          )
      }
  
      _renderCenterColumn() {
          return (
              <div style={styles.column}>
                  <div style={styles.fieldContainer}>
                      <TextField
                          floatingLabelText="Username"
                          value={this.state.user.name}
  
                          disabled={true}
                          />
  
                  </div>
  
                  <div style={styles.fieldContainer}>
  
                      <TextField
                          floatingLabelText="Email"
                          value={this.state.user.email}
                          hintText="Email"
                          type = "email"
                          onChange={(event) => this._handleUserChange('email', event.target.value)} />
  
                  </div>
  
                  <div style={styles.fieldContainer}>
  
                      <TextField
                          floatingLabelText="Battle Tag"
                          value={this.state.user.battleTag}
                          hintText="Email"
  
                          onChange={(event) => this._handleUserChange('battleTag', event.target.value)} />
  
                  </div>
  
                  {this._renderPasswordChange()}
  
                  <Divider />
  
  
  
  
              </div>
          )
      }
  
      _renderRightColumn() {
          return (
              <div style={styles.rightColumn}>
  
                  <div style={styles.avatarContainer}>
                      <h3> Avatar </h3>
  
  
                      <div style={styles.fieldContainer}>
  
                          <AvatarView user={this.props.user} />
  
                          <div style={styles.fieldContainer}>
  
                              <TextField
                                  floatingLabelText="Avatar Url"
                                  value={this.state.user.avatarUrl}
                                  hintText="Urls only. No uploads"
  
                                  onChange={(event) => this._handleUserChange('avatarUrl', event.target.value)} />
  
                          </div>
  
                      </div>
                  </div>
  
  
  
                  {this._renderGuild()}
  
              </div>
          )
      }
  
      _renderGuild() {
  
          if (this.state.user.guild != undefined) {
  
              return (
                  <div style={styles.guildContainer}>
                      <Divider />
  
                      <h3> Guild </h3>
  
                      <div style={styles.fieldContainer}>
  
                          <div style={styles.guildContainer}>
  
                              <section style={styles.guildListItem}>
                                  <section style={styles.guildText}>
                                      {this.props.user.guild.name}
                                  </section>
  
                                  <IconButton
                                      onTouchTap={this._leaveGuild}
                                      iconStyle={styles.leaveGuildButtonIcon}
                                      style={styles.leaveGuildButton} >
  
                                      <CloseIcon />
  
                                  </IconButton>
                              </section>
                          </div>
                      </div>
  
                  </div>
              )
          }
          else {
              return null;
          }
      }
  
      _renderPasswordChange() {
          if (this.state.changePassword) {
              return (
                  <div>
                      <div style={styles.fieldContainer}>
  
                          <TextField
                              floatingLabelText="New Password"
                              type="password"
                              value={this.state.user.newPassword}
                              hintText="new password"
  
                              onChange={(event) => this._handleUserChange('newPassword', event.target.value)} />
  
                      </div>
  
                      <div style={styles.fieldContainer}>
  
                          <TextField
                              floatingLabelText="Verify Password"
                              type="password"
                              value={this.state.user.passwordVerify}
                              hintText="verify password"
  
                              onChange={(event) => this._handleUserChange('passwordVerify', event.target.value)} />
  
                      </div>
                  </div>
              )
          }
          else {
              return null;
          }
      }
  
      _handleChangePasswordToggle() {
          this.setState({
              changePassword: !this.state.changePassword
          })
      }
  
      _handleStateChange(prop, value) {
  
          var state = this.state;
          state[prop] = value;
  
          this.setState(state);
      }
  
      _handleUserChange(prop, value) {
  
          var user = this.state.user;
          user[prop] = value;
  
          this.setState({
              user: user
          });
  
      }
  
      _leaveGuild() {
          this.props.leaveGuild(this.props.user.guild.name)
      }
  
      _saveProfile() {
  
          let user = this.state.user;
  
          this.props.updateUserProfile(user)
              .then(result => {
  
                  if (result) {
                      this._handleUserChange('passwordVerify', '')
                      this._handleUserChange('newPassword', '')
                      this._handleChangePasswordToggle()
                  }
              })
      }
  }
  