content: import React, { Component } from 'react';
  import axios from 'axios';
  import * as toastify from '../../functions/Toastify';
  
  import styled from 'styled-components';
  
  UploadAgentImage;
  import UploadAgentImage from '../../components/UploadAgentImage';
  import Avatar from '../icons/userprofile.jpg';
  
  // Import ModeEdit from 'material-ui/svg-icons/editor/mode-edit';
  import TextField from 'material-ui/TextField';
  import RaisedButton from 'material-ui/RaisedButton';
  // Import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import EditBtn from 'material-ui/svg-icons/content/create';
  
  const stylesRB = {
    block: {
      maxWidth: 250
    },
    radioButton: {
      marginBottom: 16
    }
  };
  
  const ImageProfile = styled.img`
    width: 100%;
  `;
  
  const SectionContainer = styled.div`
  margin-bottom: 20px;
    .col-md-10 {
      padding-left: 35px;
      margin-bottom: 50px;
    }
    p {
      font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .col-md-2 {
      padding: 0px;
    }
    .name {
      font-weight: 700 !important;
      color: #484848 !important;
      font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
      margin: 0px !important;
      word-wrap: break-word !important;
      font-size: 36px !important;
      line-height: 44px !important;
      letter-spacing: -0.6px !important;
      padding-top: 6px !important;
      margin-bottom: 10px;
      padding-bottom: 10px;
      display: block;
    }
  
    .title {
      color: #484848 !important;
      font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
      font-size: 17px !important;
      font-weight: 300 !important;
      letter-spacing: 0.2px !important;
      line-height: 22px !important;
    }
    h2 {
      font-family: Georgia;
      font-size: 18px;
      font-style: italic;
      font-weight: bold;
      padding-bottom: 10px;
      margin: 0px;
    }
  
    .IconRowDivider {
      border-top: 1px solid #dce0e0;
      border-bottom: 1px solid #dce0e0;
      display: flex;
      justify-content: space-around;
      padding: 10px;
  
      img {
        margin: 6px auto;
        display: block;
      }
  
      p {
        color: #484848 !important;
        font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        letter-spacing: 0.2px !important;
        line-height: 22px !important;
      }
    }
  `;
  
  // Const SectionContainer = styled.div`
  // margin-bottom: 20px;
  
  //   .col-md-10 {
  //     border-left: solid 1px #eaebec;
  //     padding-left: 35px;
  //     margin-bottom: 50px;
  //   }
  //   p {
  //     font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  //   }
  //   .col-md-2 {
  //     padding: 0px;
  //   }
  //   h2 {
  //     font-family: Georgia;
  //     font-size: 18px;
  //     font-style: italic;
  //     font-weight: bold;
  //     border-bottom: 1px #ccc solid;
  //     padding-bottom: 10px;
  //     margin: 0px;
  //   }
  // `;
  
  export default class AgentDetails extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        editMode: false,
        loading: false,
  
        agentId: props.agent.AgentID,
        name: props.agent.Name,
        image: props.agent.Image,
        title: props.agent.Title,
        description: props.agent.Description
  
      };
      this.setNewValueToState = this.setNewValueToState.bind(this);
    }
  
    getNewImage() {
      axios.get('http://54.190.49.213/index.php/api/agents/getAgent', {
        params: {
          id: this.state.agentId
        }
      }).then(response => {
        this.setState({ image: response.data[0].Image });
        this.forceUpdate();
      }).catch(error => {
      });
    }
  
    editSection() {
      this.setState({ editMode: !this.state.editMode });
    }
  
    setNewValueToState(event) {
      switch (event.target.id) {
        case 'name':
          this.setState({ name: event.target.value });
          break;
        case 'image':
          this.setState({ image: event.target.value });
          break;
        case 'title':
          this.setState({ title: event.target.value });
          break;
        case 'description':
          this.setState({ description: event.target.value });
          break;
      }
    }
  
    renderCardBlock() {
      if (this.state.editMode) {
        return (
          // <div className="card-block col-md-10">
  
          <div className="card-block">
            <div className="col-md-12 editArea">
  
              {/* Name: <TextField
              id={'name'}
              onChange={this.setNewValueToState}
              defaultValue={this.state.name}
              fullWidth={true}
            />
            Email: <TextField
              id={'title'}
              onChange={this.setNewValueToState}
              defaultValue={this.state.title}
              fullWidth={true}
            />
            Description: <TextField
              id={'description'}
              onChange={this.setNewValueToState}
              defaultValue={this.state.description}
              fullWidth={true}
              multiLine={true}
              rows={3}
            /> */}
  
              <div className="col-md-5">
                Name:
            </div>
              <div className="col-md-7">
                <TextField
                  id={'name'}
                  defaultValue={this.state.name}
                  onChange={this.setNewValueToState}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Title:
              </div>
              <div className="col-md-7">
                <TextField
                  id={'title'}
                  defaultValue={this.state.title}
                  onChange={this.setNewValueToState}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Description:
              </div>
              <div className="col-md-7">
                <TextField
                  defaultValue={this.state.description}
                  id={'description'}
                  onChange={this.setNewValueToState}
                  fullWidth={true}
                  multiLine={true}
                  rows={3}
                />
              </div>
  
              {/* Image: <TextField
              id={'image'}
              onChange={this.setNewValueToState}
              defaultValue={this.state.image}
              fullWidth={true}
            /> */}
              {this.renderUpdateButton()}
              {this.renderUploadImage()}
            </div>
          </div>
        );
      }
      // <div className="card-block col-md-10">
      return (
        <div className="col-md-12">
          <div className="card-block col-md-3">
            <ImageProfile src={this.state.image} />
          </div>
  
          <div className="col-md-7">
            <p className="name">{this.state.name} </p>
            <p className="title"> <b> {this.state.title} </b> </p>
            <p className="card-text"><b> Description:</b> {this.state.description}</p>
          </div>
  
        </div>
      );
    }
  
    updateSection(event) {
      event.preventDefault();
      axios({
        method: 'post',
        url: 'http://54.190.49.213/index.php/api/agents/editAgent',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          agentId: this.state.agentId,
          name: this.state.name,
          image: this.state.image,
          title: this.state.title,
          description: this.state.description
        }
      }).then(res => {
        toastify.notifySuccess(toastify.messages.updateSuccess);
        this.setState({ editMode: false });
      })
        .catch(error => {
          toastify.notifyErorr(toastify.messages.updateError);
        });
    }
  
    renderUploadImage() {
      return (<UploadAgentImage id={this.state.agentId} key={0} renderFilesAgain={() => {
        this.getNewImage();
      }} />);
    }
  
    renderUpdateButton() {
      return (
        <div>
          <div className="updateSectionsBtnsGroup">
            <RaisedButton className="updateSectionsBtn" label="Cancel" onClick={this.editSection.bind(this)} />
            <RaisedButton className="updateSectionsBtn" label="Save" primary={true} onTouchTap={this.handleToggle} onClick={this.updateSection.bind(this)} />
          </div>
        </div>
      );
    }
  
    renderEditBtn() {
      return (
        <div>
          <h4>
            <FloatingActionButton onClick={this.editSection.bind(this)} mini={true} className="addEditBtn" >
              <EditBtn />
            </FloatingActionButton>
          </h4>
          <br />
        </div>
      );
    }
  
    render() {
      return (
        <SectionContainer>
          <div>
            <div className="col-md-10">
            </div>
            {this.renderEditBtn()}
            {this.renderCardBlock()}
          </div>
        </SectionContainer>
      );
    }
  }
  