content: import React, { Component } from 'react';
  import * as toastify from '../../functions/Toastify';
  
  import axios from 'axios';
  import firebase from 'firebase';
  
  import { propertySections } from '../../functions/propertiesFuncs';
  import NotifyUpdate from '../NotifyUpdate';
  
  import styled from 'styled-components';
  import { SpeedDial, SpeedDialItem } from 'react-mui-speeddial';
  import ContentAdd from 'material-ui/svg-icons/content/add';
  import NavigationClose from 'material-ui/svg-icons/navigation/close';
  import DeleteIcon from 'material-ui/svg-icons/action/delete';
  import ModeEdit from 'material-ui/svg-icons/editor/mode-edit';
  import TextField from 'material-ui/TextField';
  import Dialog from 'material-ui/Dialog';
  import FlatButton from 'material-ui/FlatButton';
  import RaisedButton from 'material-ui/RaisedButton';
  // import Toggle from 'material-ui/Toggle';
  import { Button } from 'react-bootstrap';
  import { IsNumber } from '../../functions/Validations';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import EditBtn from 'material-ui/svg-icons/content/create';
  import EditFilesBtn from 'material-ui/svg-icons/image/photo-library';
  import UploadPropertyFiles from '../UploadPropertyFiles';
  import Toggle from 'react-toggle';
  import Divider from 'material-ui/Divider';
  import { isoToShortDate, fullDateToIsoDate, numberWithCommas } from '../../functions.js';
  import DatePicker from 'material-ui/DatePicker';
  
  const styles = {
    block: {
      maxWidth: 250,
    },
    toggle: {
      marginBottom: 16,
    },
    thumbOff: {
      backgroundColor: '#ffcccc',
    },
    trackOff: {
      backgroundColor: '#ff9d9d',
    },
    thumbSwitched: {
      backgroundColor: 'red',
    },
    trackSwitched: {
      backgroundColor: '#ff9d9d',
    },
    labelStyle: {
      color: 'red',
    },
  };
  
  
  const SectionContainer = styled.div`
  
  .alert_badge {
    background: red;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 29px;
    color: #fff;
    position: absolute;
    margin-top: -45px;
    left: -39px;
    border-radius: 50%;
  }
  
  margin-bottom: 20px;
    .col-md-10 {
      padding-left: 35px;
      margin-bottom: 50px;
    }
    p {
      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;
    }
    .col-md-2 {
      padding: 0px;
    }
  
  .col-md-7, .col-md-5 {
      padding: 10px;
    }
  
    .kdp-val {
      padding-left: 17px;
      padding-top: 10px;
    }
  
    .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;
    }
    h4 {
      font-size: 22px !important;
      font-weight: 400 !important;
      letter-spacing: -0.2px !important;
      line-height: 28px !important;
      border-bottom: 1px #e5e5e5 solid;
      padding-bottom: 10px;
      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;
    }
  
    h5 {
      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;
    }
  
    .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;
      }
    }
  `;
  
  let borderBottom = {
    borderBottom: '1px solid rgb(234, 233, 233)',
    marginBottom: '22px',
    paddingBottom: '10px',
    paddingTop: '14px'
  }
  
  
  class Renovation extends Component {
    constructor(props) {
      super(props);
      this.state = {
        editMode: false,
        CofO: props.renovation.CofO,
        CofODate: props.renovation.CofODate,
        Description: props.renovation.Description,
        Details: props.renovation.Details,
        FinishDate: props.renovation.FinishDate,
        FundsSent: props.renovation.FundsSent,
        IsCOFOFile: props.renovation.IsCOFOFile,
        IsHasFile: props.renovation.IsHasFile,
        IsPayment1File: props.renovation.IsPayment1File,
        IsPayment2File: props.renovation.IsPayment2File,
        IsPayment3File: props.renovation.IsPayment3File,
        IsSentFunds: props.renovation.IsSentFunds,
        IsWorkEstimateFile: props.renovation.IsWorkEstimateFile,
        Note: props.renovation.Note,
        Payment1: props.renovation.Payment1,
        Payment2: props.renovation.Payment2,
        Payment3: props.renovation.Payment3,
        RequestedUpdate: props.renovation.RequestedUpdate,
        ShowNote: props.renovation.ShowNote,
        StartDate: props.renovation.StartDate,
        UpdateClient: props.renovation.UpdateClient,
        WorkEstimate: props.renovation.WorkEstimate,
        open: false,
        updates: [],
      };
      this.setNewValueToState = this.setNewValueToState.bind(this);
    }
  
    componentWillMount() {
      this.initUpdateInvestorByFireBase();
    }
  
    initUpdateInvestorByFireBase() {
      this.firebaseRef = firebase.database().ref("updates/" + this.props.propertyId);
      this.firebaseRef.orderByChild("section").equalTo(propertySections.Renovations).on('value', function (dataSnapshot) {
        var items = [];
        dataSnapshot.forEach(function (val) {
          if (val.val().status == '0') {
            var item = val.val();
            item.key = val.key;
            items.push(item);
          }
        });
        this.setState({ updates: items })
      }.bind(this));
    }
  
    handleOpen = () => {
      this.setState({ open: true });
    };
  
    handleClose = () => {
      this.setState({ open: false });
    };
  
    editSection() {
      this.setState({ editMode: !this.state.editMode });
    }
  
    setNewValueToState(event) {
      switch (event.target.id) {
        case 'CofO':
          this.setState({ CofO: event.target.value });
          break;
        case 'CofODate':
          this.setState({ CofODate: event.target.value });
          break;
        case 'Description':
          this.setState({ Description: event.target.value });
          break;
        case 'Details':
          this.setState({ Details: event.target.value });
          break;
        case 'FinishDate':
          this.setState({ FinishDate: event.target.value });
          break;
        case 'FundsSent':
          if (IsNumber(event.target.value)) { this.setState({ FundsSent: event.target.value }); }
          else { event.target.value = this.state.FundsSent; }
          break;
        case 'IsCOFOFile':
          this.setState({ IsCOFOFile: event.target.value });
          break;
        case 'IsHasFile':
          this.setState({ IsHasFile: event.target.value });
          break;
        case 'IsPayment1File':
          this.setState({ IsPayment1File: event.target.value });
          break;
        case 'IsPayment2File':
          this.setState({ IsPayment2File: event.target.value });
          break;
        case 'IsPayment3File':
          this.setState({ IsPayment3File: event.target.value });
          break;
        case 'IsSentFunds':
          const sf = (this.state.IsSentFunds == '0') ? '1' : '0';
          this.setState({ IsSentFunds: sf });
          break;
        case 'IsWorkEstimateFile':
          this.setState({ IsWorkEstimateFile: event.target.value });
          break;
        case 'Note':
          this.setState({ Note: event.target.value });
          break;
        case 'Payment1':
          if (IsNumber(event.target.value)) { this.setState({ Payment1: event.target.value }); }
          else { event.target.value = this.state.Payment1; }
          break;
        case 'Payment2':
          if (IsNumber(event.target.value)) { this.setState({ Payment2: event.target.value }); }
          else { event.target.value = this.state.Payment2; }
          break;
        case 'Payment3':
          if (IsNumber(event.target.value)) { this.setState({ Payment3: event.target.value }); }
          else { event.target.value = this.state.Payment3; }
          break;
        case 'RequestedUpdate':
          this.setState({ RequestedUpdate: event.target.value });
          break;
        case 'ShowNote':
          const sn = (this.state.ShowNote == '0') ? '1' : '0';
          this.setState({ ShowNote: sn });
          break;
        case 'StartDate':
          this.setState({ StartDate: event.target.value });
          break;
        case 'UpdateClient':
          this.setState({ UpdateClient: event.target.value });
          break;
        case 'WorkEstimate':
          if (IsNumber(event.target.value)) { this.setState({ WorkEstimate: event.target.value }); }
          else { event.target.value = this.state.WorkEstimate; }
          break;
        default:
          break;
      }
    }
  
    renderCardBlock() {
      if (this.state.editMode) {
        return (
          <div className="card-block row">
            <div className="col-md-12 editArea">
  
              <div className="col-md-5">
                Description:
                </div>
  
              <div className="col-md-7">
                <TextField
                  id={'Description'}
                  onChange={this.setNewValueToState}
                  defaultValue={this.state.Description}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Details:
                </div>
  
              <div className="col-md-7">
                <TextField
                  id={'Details'}
                  onChange={this.setNewValueToState}
                  defaultValue={this.state.Details}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Funds Sent:
                </div>
  
              <div className="col-md-7">
  
                <TextField
                  id={'FundsSent'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.FundsSent)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Sent Funds:
                </div>
              <div className="col-md-7">
                <Toggle
                  className="toggle"
                  id="IsSentFunds"
                  checked={(this.state.IsSentFunds == '1') ? true : false}
                  onChange={this.setNewValueToState} />
                <Divider />
              </div>
  
  
  
              <div className="col-md-5">
                Payment 1:
                </div>
  
              <div className="col-md-7">
                <TextField
                  id={'Payment1'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.Payment1)}
                  fullWidth={true}
                />
              </div>
              <div className="col-md-5">
                Payment 2:
                </div>
  
              <div className="col-md-7">
                <TextField
                  id={'Payment2'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.Payment2)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Payment 3:
                </div>
  
              <div className="col-md-7">
                <TextField
                  id={'Payment3'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.Payment3)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Start Date:
              </div>
              <div className="col-md-7">
                <DatePicker
                  fullWidth={true}
                  openToYearSelection={true}
                  hintText={isoToShortDate(this.state.StartDate)}
                  locale="en-US"
                  onChange={(n, date) => {
                    const d = fullDateToIsoDate(date);
                    this.setState({ StartDate: d });
                  }}
                />
              </div>
  
              <div className="col-md-5">
                Finish Date:
              </div>
              <div className="col-md-7">
                <DatePicker
                  fullWidth={true}
                  openToYearSelection={true}
                  hintText={isoToShortDate(this.state.FinishDate)}
                  locale="en-US"
                  onChange={(n, date) => {
                    const d = fullDateToIsoDate(date);
                    this.setState({ FinishDate: d });
                  }}
                />
              </div>
  
              <div className="col-md-5">
                Work Estimate:
              </div>
              <div className="col-md-7">
                <TextField
                  id={'WorkEstimate'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.WorkEstimate)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                CofO:
              </div>
  
              <div className="col-md-7">
  
                <TextField
                  id={'CofO'}
                  onChange={this.setNewValueToState}
                  defaultValue={this.state.CofO}
                  fullWidth={true}
                />
              </div>
  
  
              <div className="col-md-5">
                CofO Date:
              </div>
  
              <div className="col-md-7">
  
                <DatePicker
                  fullWidth={true}
                  openToYearSelection={true}
                  hintText={isoToShortDate(this.state.CofODate)}
                  locale="en-US"
                  onChange={(n, date) => {
                    const d = fullDateToIsoDate(date);
                    this.setState({ CofODate: d });
                  }}
                />
              </div>
  
              <div className="col-md-5">
                Show Note:
              </div>
  
              <div className="col-md-7">
                <Toggle
                  className="toggle"
                  id="ShowNote"
                  checked={(this.state.ShowNote == '1') ? true : false}
                  onChange={this.setNewValueToState} />
                <Divider />
              </div>
  
              <div className="col-md-5">
                Note:
              </div>
              <div className="col-md-7">
                <TextField
                  id={'Note'}
                  multiLine={true}
                  onChange={this.setNewValueToState}
                  defaultValue={this.state.Note}
                  fullWidth={true}
                  rows={3}
                />
              </div>
  
              {this.retnderUpdatesButtons()}
  
            </div>
          </div>
        )
      }
      return (
        <div className="row">
          <div className="col-md-3">
            {(this.state.updates.length > 0) ? <span className="alert_badge"> 1 </span> : ''}
            <h6></h6>
          </div>
          <div className="col-md-9" style={borderBottom}>
            <div className="col-md-6">
              <p className="card-text">Description:  <b>  {this.state.Description} </b> </p>
              <p className="card-text">Details:  <b>  {this.state.Details} </b> </p>
              <p className="card-text">Sent Funds:  <b>  {(this.state.IsSentFunds == 0) ? 'No' : 'Yes'} </b> </p>
              <p className="card-text">Funds Sent:  <b>  {numberWithCommas(this.state.FundsSent)} </b> </p>
              <p className="card-text">Payment 1:  <b>  {numberWithCommas(this.state.Payment1)} </b> </p>
              <p className="card-text">Payment 2:  <b>  {numberWithCommas(this.state.Payment2)} </b> </p>
              <p className="card-text">Payment 3:  <b>  {numberWithCommas(this.state.Payment3)} </b> </p>
            </div>
            <div className="col-md-6">
              <p className="card-text">Start Date:  <b>  {isoToShortDate(this.state.StartDate)} </b> </p>
              <p className="card-text">Finish Date:  <b>  {isoToShortDate(this.state.FinishDate)} </b> </p>
              <p className="card-text">Work Estimate:  <b>  {numberWithCommas(this.state.WorkEstimate)} </b> </p>
              <p className="card-text">CofO:  <b>  {this.state.CofO} </b> </p>
              <p className="card-text">CofO Date:  <b>  {isoToShortDate(this.state.CofODate)} </b> </p>
              <p className="card-text">Show Note:  <b>  {(this.state.ShowNote == 0) ? 'No' : 'Yes'} </b> </p>
            </div>
            <div className="col-md-12">
              <p className="card-text">Note:  <b>  {this.state.Note} </b> </p>
            </div>
          </div>
        </div>
      )
    }
  
    updateSection() {
      this.setState({ loading: true });
      axios({
        method: 'post',
        url: 'http://54.190.49.213/index.php/api/Renovation/editRenovation',
        data: {
          propertyId: this.props.propertyId,
          CofO: this.state.CofO,
          CofODate: this.state.CofODate,
          Description: this.state.Description,
          Details: this.state.Details,
          FinishDate: this.state.FinishDate,
          FundsSent: this.state.FundsSent,
          IsCOFOFile: this.state.IsCOFOFile,
          IsHasFile: this.state.IsHasFile,
          IsPayment1File: this.state.IsPayment1File,
          IsPayment2File: this.state.IsPayment2File,
          IsPayment3File: this.state.IsPayment3File,
          IsSentFunds: this.state.IsSentFunds,
          IsWorkEstimateFile: this.state.IsWorkEstimateFile,
          Note: this.state.Note,
          Payment1: this.state.Payment1,
          Payment2: this.state.Payment2,
          Payment3: this.state.Payment3,
          RequestedUpdate: this.state.RequestedUpdate,
          ShowNote: this.state.ShowNote,
          StartDate: this.state.StartDate,
          UpdateClient: this.state.UpdateClient,
          WorkEstimate: this.state.WorkEstimate,
        }
      }).then((res) => {
        toastify.notifySuccess(toastify.messages.updateSuccess);
        this.setState({ editMode: false });
  
        // res.data[0] insted this.state
        // this.props.handler(this.state, 'renovation', this.props.rKey);
  
      })
        .catch(function (error) {
          toastify.notifyErorr(toastify.messages.updateError);
        });
    }
  
    retnderUpdatesButtons() {
      return (
        <div className="updateSectionsBtnsGroup">
          <RaisedButton className="updateSectionsBtn" label="Cancel" onClick={() => { this.setState({ editMode: false }) }} />
          <RaisedButton className="updateSectionsBtn" label="Update Investor" backgroundColor="lightGreen" onClick={this.handleOpen} />
          <RaisedButton className="updateSectionsBtn" label="Save" primary={true} onClick={this.updateSection.bind(this)} />
        </div>
        // <div>
        //   <div onClick={this.updateSection.bind(this)}>
        //     <RaisedButton label="Save" secondary={true} fullWidth={false} />
        //   </div>
        //   <div onClick={this.updateClient.bind(this)}>
        //     <RaisedButton label="Update Client" secondary={true} fullWidth={false} />
        //   </div>
        // </div>
      );
    }
  
    // setUpdateText = (event) => {
    //   this.setState({ updateText: event.target.value });
  
    // }
  
    renderSectionHaeder() {
      return (
        <div>
          <h4>Renovation
            <FloatingActionButton onClick={this.editSection.bind(this)} mini={true} className="addEditBtn" >
              <EditBtn />
            </FloatingActionButton>
  
            <div className="addFilesBtn" >
              <UploadPropertyFiles id={this.props.propertyId} sectionName={'renovation'} renderFilesAgain={this.props.renderFilesAgain} />
            </div>
  
            <FloatingActionButton onClick={() => this.props.openSectionFilesModal('renovation')} mini={true} className="addFilesBtn" >
              <EditFilesBtn />
            </FloatingActionButton>
            {/* <Button style={{ float: 'right' }} onClick={this.editSection.bind(this)} bsStyle="success">{(this.state.editMode) ? 'Cancel' : 'Edit'} </Button> */}
          </h4>
        </div>
      );
    }
  
    renderSendUpdateDialog() {
      return (
        <NotifyUpdate
          fireUpdates={this.state.updates}
          open={this.state.open}
          propertyId={this.props.propertyId}
          investorId={this.props.investorId}
          sectionName={propertySections.Renovations}
          save={this.updateSection.bind(this)}
          update={this.props.update}
          handleClose={this.handleClose.bind(this)}
        />
      )
    }
  
  
    render() {
      return (
        <SectionContainer >
          {this.renderSectionHaeder()}
          {this.renderCardBlock()}
          {this.renderSendUpdateDialog()}
        </SectionContainer>
      );
    }
  }
  
  export default Renovation;
  