content: import React, { Component } from 'react';
  import * as toastify from '../../functions/Toastify';
  import styled from 'styled-components';
  import axios from 'axios';
  import Drawer from 'material-ui/Drawer';
  import TextField from 'material-ui/TextField';
  import RaisedButton from 'material-ui/RaisedButton';
  import { Button } from 'react-bootstrap';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import AddBtn from 'material-ui/svg-icons/content/add';
  import Toggle from 'react-toggle';
  import Divider from 'material-ui/Divider';
  import { isoToShortDate, fullDateToIsoDate } 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`
  margin-bottom: 77px;
    .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;
    }
  
    .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 AddNewLeasing extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        open: false,
  
        PropertyId: '',
        ReadyToRent: '0',
        StartDate: '',
        EstimateRentDate: '',
        ListingOnFacebook: '',
        ListingOnCraigslist: '',
        Application: '',
        MoveInDate: '',
        Lease: '',
        ShowNote: '0',
        Note: '',
        IsHasFile: '',
        IsApplicationFile: '',
        IsLeaseFile: '',
        RequestedUpdate: '',
        UpdateClient: '',
      };
      this.setNewValueToState = this.setNewValueToState.bind(this);
    }
  
    handleToggle = () => this.setState({ open: !this.state.open });
    handleClose = () => this.setState({ open: false });
  
    renderSectionHaeder() {
      return (
        <div>
          <h4>Leasing
            <FloatingActionButton onClick={this.handleToggle.bind(this)} mini={true} className="addEditBtn" >
              <AddBtn />
            </FloatingActionButton>
          </h4>
        </div>
      );
    }
  
    renderSection() {
      return (
        <Drawer
          containerClassName="darwerElementStyle" g
          docked={false}
          openSecondary={true}
          width={'60%'}
          open={this.state.open}
          onRequestChange={(open) => this.setState({ open })}
        >
          <div>
            {this.renderNewEmptyObj()}
          </div>
        </Drawer>
      );
    }
  
    render() {
      return (
        <div>
          <SectionContainer>
            {this.renderSectionHaeder()}
            {this.renderSection()}</SectionContainer>
        </div >
      );
    }
  
    addNewObj() {
  
      axios({
        method: 'post',
        url: 'http://54.190.49.213/index.php/api/Leasing/addLeasingProperty',
        data: {
          PropertyId: this.props.propertyId,
          ReadyToRent: this.state.ReadyToRent,
          StartDate: this.state.StartDate,
          EstimateRentDate: this.state.EstimateRentDate,
          ListingOnFacebook: this.state.ListingOnFacebook,
          ListingOnCraigslist: this.state.ListingOnCraigslist,
          Application: this.state.Application,
          MoveInDate: this.state.MoveInDate,
          Lease: this.state.Lease,
          ShowNote: this.state.ShowNote,
          Note: this.state.Note,
          IsHasFile: this.state.IsHasFile,
          IsApplicationFile: this.state.IsApplicationFile,
          IsLeaseFile: this.state.IsLeaseFile,
          RequestedUpdate: this.state.RequestedUpdate,
          UpdateClient: this.state.UpdateClient,
        }
      }).then((res) => {
        toastify.notifySuccess(toastify.messages.updateSuccess);
        this.setState({ open: false });
      })
        .catch(function (error) {
          toastify.notifyErorr(toastify.messages.updateError);
        });
    }
  
    renderNewEmptyObj() {
      return (
        // <div className="card-block col-md-10">
        <div className="col-md-12 drawer-wrap" >
          <p className="darwerElementHeader"><b> ADD NEW LEASING </b> </p>
          <div className="col-md-12 editArea">
  
            <div className="col-md-5">
              Ready For Rent:
            </div>
            <div className="col-md-7">
              <Toggle
                className="toggle"
                id="ReadyToRent"
                checked={(this.state.ReadyToRent == '1') ? true : false}
                onChange={this.setNewValueToState} />
              <Divider />
            </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">
              Estimate Rent Date:
              </div>
  
            <div className="col-md-7">
  
              <DatePicker
                fullWidth={true}
                openToYearSelection={true}
                hintText={isoToShortDate(this.state.EstimateRentDate)}
                locale="en-US"
                onChange={(n, date) => {
                  const d = fullDateToIsoDate(date);
                  this.setState({ EstimateRentDate: d });
                }}
              />
            </div>
  
            <div className="col-md-5">
              Listing On Facebook:
              </div>
  
            <div className="col-md-7">
              <TextField
                id={'ListingOnFacebook'}
                onChange={this.setNewValueToState}
                defaultValue={this.state.ListingOnFacebook}
                fullWidth={true}
              />
            </div>
            <div className="col-md-5">
              Listing On Craigslist:
          </div>
  
            <div className="col-md-7">
              <TextField
                id={'ListingOnCraigslist'}
                onChange={this.setNewValueToState}
                defaultValue={this.state.ListingOnCraigslist}
                fullWidth={true}
              />
            </div>
  
            <div className="col-md-5">
              Application:
          </div>
  
            <div className="col-md-7">
  
              <TextField
                id={'Application'}
                onChange={this.setNewValueToState}
                defaultValue={this.state.Application}
                fullWidth={true}
              />
            </div>
  
            <div className="col-md-5">
              Move In Date:
             </div>
            <div className="col-md-7">
  
              <DatePicker
                fullWidth={true}
                openToYearSelection={true}
                hintText={isoToShortDate(this.state.MoveInDate)}
                locale="en-US"
                onChange={(n, date) => {
                  const d = fullDateToIsoDate(date);
                  this.setState({ MoveInDate: d });
                }}
              />
            </div>
  
            <div className="col-md-5">
              Lease:
              </div>
  
            <div className="col-md-7">
  
              <TextField
                id={'Lease'}
                onChange={this.setNewValueToState}
                defaultValue={this.state.Lease}
                fullWidth={true}
              />
            </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
                multiLine={true}
                rows={3}
                id={'Note'}
                onChange={this.setNewValueToState}
                defaultValue={this.state.Note}
                fullWidth={true}
              />
            </div>
            <div className="updateSectionsBtnsGroup">
              <RaisedButton className="updateSectionsBtn" label="Cancel" onClick={this.handleClose.bind(this)} />
              <RaisedButton className="updateSectionsBtn" label="Save" primary={true} onTouchTap={this.handleToggle} onClick={this.addNewObj.bind(this)} />
            </div>
          </div>
  
  
          {/* Ready For Rent:
            <Toggle
            className="toggle"
            id="ReadyToRent"
            checked={(this.state.ReadyToRent == '1') ? true : false}
            onChange={this.setNewValueToState} />
          <Divider />
  
          Start Date: <TextField
            id={'StartDate'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.StartDate}
            fullWidth={true}
          />
          Estimate Rent Date: <TextField
            id={'EstimateRentDate'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.EstimateRentDate}
            fullWidth={true}
          />
          Listing On Facebook: <TextField
            id={'ListingOnFacebook'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.ListingOnFacebook}
            fullWidth={true}
          />
          Listing On Craigslist: <TextField
            id={'ListingOnCraigslist'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.ListingOnCraigslist}
            fullWidth={true}
          />
          Application: <TextField
            id={'Application'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.Application}
            fullWidth={true}
          />
          Move In Date: <TextField
            id={'MoveInDate'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.MoveInDate}
            fullWidth={true}
          />
          Lease: <TextField
            id={'Lease'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.Lease}
            fullWidth={true}
          />
  
          Show Note:
              <Toggle
            className="toggle"
            id="ShowNote"
            checked={(this.state.ShowNote == '1') ? true : false}
            onChange={this.setNewValueToState} />
          <Divider />
  
          Note: <TextField
            multiLine={true}
            id={'Note'}
            onChange={this.setNewValueToState}
            defaultValue={this.state.Note}
            fullWidth={true}
          /> */}
  
  
        </div>
      )
    }
  
    setNewValueToState(event) {
      switch (event.target.id) {
        case 'ReadyToRent':
          const rent = (this.state.ReadyToRent == '0') ? '1' : '0';
          this.setState({ ReadyToRent: rent });
          break;
        // case 'ReadyToRent':
        //   this.setState({ ReadyToRent: event.target.value });
        //   break;
        case 'StartDate':
          this.setState({ StartDate: event.target.value });
          break;
        case 'EstimateRentDate':
          this.setState({ EstimateRentDate: event.target.value });
          break;
        case 'ListingOnFacebook':
          this.setState({ ListingOnFacebook: event.target.value });
          break;
        case 'ListingOnCraigslist':
          this.setState({ ListingOnCraigslist: event.target.value });
          break;
        case 'Application':
          this.setState({ Application: event.target.value });
          break;
        case 'MoveInDate':
          this.setState({ MoveInDate: event.target.value });
          break;
        case 'Lease':
          this.setState({ Lease: event.target.value });
          break;
        case 'ShowNote':
          const sn = (this.state.ShowNote == '0') ? '1' : '0';
          this.setState({ ShowNote: sn });
          break;
        // case 'ShowNote':
        //   this.setState({ ShowNote: event.target.value });
        //   break;
        case 'Note':
          this.setState({ Note: event.target.value });
          break;
        case 'IsHasFile':
          this.setState({ IsHasFile: event.target.value });
          break;
        case 'IsApplicationFile':
          this.setState({ IsApplicationFile: event.target.value });
          break;
        case 'IsLeaseFile':
          this.setState({ IsLeaseFile: event.target.value });
          break;
        case 'RequestedUpdate':
          this.setState({ RequestedUpdate: event.target.value });
          break;
        case 'UpdateClient':
          this.setState({ UpdateClient: event.target.value });
          break;
        default:
          break;
      }
    }
  
  }
  
  export default AddNewLeasing;
  