content: import React from 'react';
  import axios from 'axios';
  import * as toastify from '../../functions/Toastify';
  
  import { Link, browserHistory } from 'react-router';
  import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
  import { isoToShortDate, fullDateToIsoDate, numberWithCommas } from '../../functions.js';
  import { calculateROI, calculateYield, calculateTotalMonths, getPropertyTypeName, propertyTypes, getPropertyUrl } from '../../functions/propertiesFuncs';
  import { getBranchName } from '../../functions/BranchesFuncs';
  import { IsNumber } from '../../functions/Validations';
  import FlatButton from 'material-ui/FlatButton';
  import HomeIcon from '../icons/Home.png';
  import PriceIcon from '../icons/Money Bag Filled-50.png';
  import TotalReturn from '../icons/Return.png';
  import Yield from '../icons/yield.png';
  import TotalMonth from '../icons/Month.png';
  import ROI from '../ROI';
  import PWIcon from '../icons/PWIcon.jpg';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import EditBtn from 'material-ui/svg-icons/content/create';
  import DatePicker from 'material-ui/DatePicker';
  import SelectField from 'material-ui/SelectField';
  import MenuItem from 'material-ui/MenuItem';
  
  import styled from 'styled-components';
  
  import TextField from 'material-ui/TextField';
  import RaisedButton from 'material-ui/RaisedButton';
  import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
  import Divider from 'material-ui/Divider';
  
  const stylesRB = {
    block: {
      maxWidth: 250
    },
    radioButton: {
      marginBottom: 16,
      width: '150px',
      display: 'inline-block'
    }
  };
  
  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: 20px;
    .col-md-10 {
      padding-left: 35px;
      margin-bottom: 50px;
    }
    .col-md-5 {
          padding: 10px;
    }
  
    .col-md-7 {
      padding: 10px;
    }
    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;
      // text-align: center;
    }
    .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;
    }
    h4 {
      font-size: 22px !important;
      font-weight: 400 !important;
      border-bottom: 1px #e5e5e5 solid;
      padding-bottom: 10px;
      letter-spacing: -0.2px !important;
      line-height: 28px !important;
      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 {
      text-align: center;
      border-top: 1px solid #dce0e0;
      display: flex;
      justify-content: space-around;
      padding: 10px;
  
      img {
        margin: 6px auto;
        display: block;
      }
    }
  `;
  
  const borderBottom = {
    borderBottom: '1px solid rgb(234, 233, 233)',
    marginBottom: '22px',
    paddingBottom: '10px',
    paddingTop: '14px'
  };
  
  export default class UnitHeader extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        notConnectedPWPropertiesList: [],
        notConnectedPWUnitsList: [],
        editMode: false,
  
        PropertyId: props.property.PropertyId,
        PWBuildingID: props.property.PWBuildingID,
        PWUnitID: props.property.PWUnitID,
        PropertyName: props.property.PropertyName,
        BranchId: props.property.BranchId,
        PropertyType: props.property.PropertyType,
        NumOfUnits: props.property.NumOfUnits,
        NumOfBedrooms: props.property.NumOfBedrooms,
        NumOfBathrooms: props.property.NumOfBathrooms,
        Sqft: props.property.Sqft,
        VacantOrOccupied: props.property.VacantOrOccupied,
        TargetRent: props.property.TargetRent,
        CountyYearlyTax: props.property.CountyYearlyTax,
        CitySchoolYearlyTax: props.property.CitySchoolYearlyTax,
        InvestmentAmount: props.property.InvestmentAmount,
        // TotalReturn: props.property.TotalReturn,
        InvestmentDate: props.property.InvestmentDate,
        Active: props.property.Active
      };
      this.setNewValueToState = this.setNewValueToState.bind(this);
    }
  
    componentWillMount() {
      this.getNotConnectedPWProperties();
      this.getNotConnectedPWUnits();
    }
  
    editSection() {
      this.setState({ editMode: !this.state.editMode });
    }
  
    disconnectPWPropertyConnection() {
      this.setState({ PWBuildingID: 0, PWUnitID: 0 }, () => { toastify.notifyWarn(toastify.messages.disconnectedPWProperty) })
    }
  
    setNewValueToState(event) {
      switch (event.target.name) {
        case 'PropertyType':
          this.setState({ PropertyType: event.target.value });
          this.disconnectPWPropertyConnection();
          break;
        case 'Active':
          this.setState({ Active: event.target.value });
          break;
        case 'VacantOrOccupied':
          this.setState({ VacantOrOccupied: event.target.value });
          break;
        case 'BranchId':
          this.setState({ BranchId: event.target.value });
          break;
  
        default:
          break;
      }
  
      switch (event.target.id) {
        case 'PropertyName':
          this.setState({ PropertyName: event.target.value });
          break;
        case 'BranchId':
          this.setState({ BranchId: event.target.value });
          break;
        case 'NumOfUnits':
          if (IsNumber(event.target.value)) {
            this.setState({ NumOfUnits: event.target.value });
          } else {
            event.target.value = this.state.NumOfUnits;
          }
          break;
        case 'NumOfBedrooms':
          if (IsNumber(event.target.value)) {
            this.setState({ NumOfBedrooms: event.target.value });
          } else {
            event.target.value = this.state.NumOfBedrooms;
          }
          break;
        case 'NumOfBathrooms':
          if (IsNumber(event.target.value)) {
            this.setState({ NumOfBathrooms: event.target.value });
          } else {
            event.target.value = this.state.NumOfBathrooms;
          }
          break;
        case 'Sqft':
          if (IsNumber(event.target.value)) {
            this.setState({ Sqft: event.target.value });
          } else {
            event.target.value = this.state.Sqft;
          }
          break;
        case 'VacantOrOccupied':
          this.setState({ VacantOrOccupied: event.target.value });
          break;
        case 'TargetRent':
          if (IsNumber(event.target.value)) {
            this.setState({ TargetRent: event.target.value });
          } else {
            event.target.value = this.state.TargetRent;
          }
          break;
        case 'CountyYearlyTax':
          if (IsNumber(event.target.value)) {
            this.setState({ CountyYearlyTax: event.target.value });
          } else {
            event.target.value = this.state.CountyYearlyTax;
          }
          break;
        case 'CitySchoolYearlyTax':
          if (IsNumber(event.target.value)) {
            this.setState({ CitySchoolYearlyTax: event.target.value });
          } else {
            event.target.value = this.state.CitySchoolYearlyTax;
          }
          break;
        case 'InvestmentAmount':
          if (IsNumber(event.target.value)) {
            this.setState({ InvestmentAmount: event.target.value });
          } else {
            event.target.value = this.state.InvestmentAmount;
          }
          break;
        case 'TotalReturn':
          if (IsNumber(event.target.value)) {
            this.setState({ TotalReturn: event.target.value });
          } else {
            event.target.value = this.state.TotalReturn;
          }
          break;
        case 'InvestmentDate':
          this.setState({ InvestmentDate: event.target.value });
          break;
        case 'Active':
          this.setState({ Active: event.target.value });
          break;
      }
    }
  
    getNotConnectedPWProperties() {
      axios.get('http://54.190.49.213/index.php/api/properties/getNotConnectedPWProperties', {
        params: {
          id: this.state.BranchId,
          PWPropertyID: this.state.PWBuildingID
        }
      }).then(response => {
        this.setState({
          notConnectedPWPropertiesList: response.data
        });
      })
        .catch(error => {
        });
    }
  
    getNotConnectedPWUnits() {
      axios.get('http://54.190.49.213/index.php/api/properties/getNotConnectedPWPUnits', {
        params: {
          id: this.state.BranchId,
          PWPropertyID: this.state.PWBuildingID
        }
      }).then(response => {
        this.setState({
          notConnectedPWUnitsList: response.data
        });
      })
        .catch(error => {
        });
    }
  
    updateSection() {
      axios({
        method: 'post',
        url: 'http://54.190.49.213/index.php/api/properties/editProperty',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          propertyId: this.state.PropertyId,
          propertyName: this.state.PropertyName,
          branchId: this.state.BranchId,
          numOfUnits: this.state.NumOfUnits,
          numOfBedrooms: this.state.NumOfBedrooms,
          numOfBathrooms: this.state.NumOfBathrooms,
          sqft: this.state.Sqft,
          vacantOrOccupied: this.state.VacantOrOccupied,
          targetRent: this.state.TargetRent,
          countyYearlyTax: this.state.CountyYearlyTax,
          citySchoolYearlyTax: this.state.CitySchoolYearlyTax,
          investmentAmount: this.state.InvestmentAmount,
          totalReturn: this.state.TotalReturn,
          investmentDate: this.state.InvestmentDate,
          active: this.state.Active,
          propertyType: this.state.PropertyType,
          PWBuildingID: this.state.PWBuildingID,
          PWUnitID: this.state.PWUnitID
        }
      }).then(res => {
        toastify.notifySuccess(toastify.messages.updateSuccess);
        this.handlePropertyTypeChange();
        this.setState({ editMode: false });
        this.props.reRenderPropertyData();
        // This.props.handler(this.state, 'marketing');
      })
        .catch(error => {
          toastify.notifyErorr(toastify.messages.updateError);
        });
    }
  
    handlePropertyTypeChange() {
      if (this.props.property.PropertyType != this.state.PropertyType) {
        const propUrl = getPropertyUrl(this.state.PropertyType, this.props.property.PropertyId);
        browserHistory.push(propUrl);
      }
    }
  
    getSelectedPWPropertyValue() {
      let indexVal;
  
      if (this.state.PropertyType == propertyTypes.Unit) {
        indexVal = this.state.notConnectedPWUnitsList.findIndex(x => x.PWUnitID == this.state.PWUnitID);
      } else {
        indexVal = this.state.notConnectedPWPropertiesList.findIndex(x => x.PWBuildingID == this.state.PWBuildingID);
      }
  
      return indexVal;
    }
  
    renderCardBlock() {
      if (this.state.editMode) {
        return (
          <div className="card-block row">
            <div className="col-md-12 editArea">
  
              <div className="col-md-5">
                Property Type:
                </div>
              <div className="col-md-7">
                <RadioButtonGroup
                  onChange={this.setNewValueToState}
                  name="PropertyType"
                  fullWidth={true}
                  defaultSelected={this.state.PropertyType}>
                  <RadioButton
                    value="1"
                    label="Building"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="2"
                    label="Unit"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="3"
                    label="Single Home"
                    style={stylesRB.radioButton}
                  />
                </RadioButtonGroup>
                <Divider />
              </div>
  
              <div className="col-md-5">
                Property In PW:
                  </div>
              <div className="col-md-7">
                <SelectField
                  maxHeight={277}
                  fullWidth={true}
                  disabled={!(this.state.PropertyType > 0)}
                  errorText={!(this.state.PropertyType > 0) && 'Select Property Type'}
                  value={this.getSelectedPWPropertyValue()}
                  onChange={(event, index, value) => {
                    if (this.state.PropertyType == propertyTypes.Unit) {
                      this.setState({
                        PWBuildingID: this.state.notConnectedPWUnitsList[value].PWBuildingID,
                        PWUnitID: (this.state.notConnectedPWUnitsList[value].PWUnitID == null ||
                          this.state.PropertyType == 1) ?
                          0 :
                          this.state.notConnectedPWUnitsList[value].PWUnitID
                      });
                    } else {
                      this.setState({
                        PWBuildingID: this.state.notConnectedPWPropertiesList[value].PWBuildingID,
                        PWUnitID: (this.state.PropertyType == 1) ? 0 :
                          this.state.notConnectedPWPropertiesList[value].PWBuildingID
                      });
                    }
                  }}
                >
                  {this.renderPWMenuItems()}
                </SelectField>
  
              </div>
  
              <div className="col-md-5">
                Property Name:
               </div>
              <div className="col-md-7">
                <TextField
                  id={'PropertyName'}
                  onChange={this.setNewValueToState}
                  defaultValue={this.state.PropertyName}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Active:
                </div>
              <div className="col-md-7">
                <RadioButtonGroup
                  onChange={this.setNewValueToState}
                  name="Active"
                  fullWidth={true}
                  defaultSelected={this.state.Active}>
                  <RadioButton
                    value="1"
                    label="ACTIVE"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="0"
                    label="NOT ACTIVE"
                    style={stylesRB.radioButton}
                  />
                </RadioButtonGroup>
                <Divider />
              </div>
  
              <div className="col-md-5">
                Vacant Or Occupied:
               </div>
              <div className="col-md-7">
                <RadioButtonGroup
                  onChange={this.setNewValueToState}
                  name="VacantOrOccupied"
                  fullWidth={true}
                  defaultSelected={this.state.VacantOrOccupied}>
                  <RadioButton
                    value="VACANT"
                    label="VACANT"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="OCCUPIED"
                    label="OCCUPIED"
                    style={stylesRB.radioButton}
                  />
                </RadioButtonGroup>
                <Divider />
              </div>
  
              <div className="col-md-5">
                Branch:
              </div>
  
              <div className="col-md-7">
                <RadioButtonGroup
                  onChange={this.setNewValueToState}
                  name="BranchId"
                  fullWidth={true}
                  defaultSelected={this.state.BranchId}>
                  <RadioButton
                    value="1"
                    label="Rochester"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="2"
                    label="Cleveland"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="3"
                    label="Columbus"
                    style={stylesRB.radioButton}
                  />
                  <RadioButton
                    value="4"
                    label="Jacksonville"
                    style={stylesRB.radioButton}
                  />
                </RadioButtonGroup>
                <Divider />
              </div>
  
              <div className="col-md-5">
                Num Of Bedrooms:
              </div>
  
              <div className="col-md-7">
                <TextField
                  id={'NumOfBedrooms'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.NumOfBedrooms)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Num Of Bathrooms:
              </div>
  
              <div className="col-md-7">
                <TextField
                  id={'NumOfBathrooms'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.NumOfBathrooms)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Sqft:
              </div>
  
              <div className="col-md-7">
                <TextField
                  id={'Sqft'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.Sqft)}
                  fullWidth={true}
                />
              </div>
  
              <div className="col-md-5">
                Target Rent:
              </div>
              <div className="col-md-7">
                <TextField
                  id={'TargetRent'}
                  onChange={this.setNewValueToState}
                  defaultValue={numberWithCommas(this.state.TargetRent)}
                  fullWidth={true}
                />
              </div>
  
              <div className="updateSectionsBtnsGroup">
                <RaisedButton className="updateSectionsBtn" label="Cancel" onClick={() => {
                  this.setState({ editMode: false });
                }} />
                <RaisedButton className="updateSectionsBtn" label="Save" primary={true} onClick={this.updateSection.bind(this)} />
              </div>
  
            </div>
          </div>
        );
      }
  
      return (
        <div>
          <div className="col-md-3"></div>
          <div className="col-md-9">
            <div className="col-md-6">
              <p className="card-text"> <b> {(this.state.Active == 1) ? 'ACTIVE' : 'NOT ACTIVE'} </b></p>
              <p className="card-text">Property Type: <b> {getPropertyTypeName(this.state.PropertyType)} </b></p>
              <p className="card-text">Branch: <b> {getBranchName(this.state.BranchId)} </b></p>
              {/* <p className="card-text">Num Of Units: <b> {this.state.NumOfUnits} </b></p> */}
              <p className="card-text">Sqft: <b> {numberWithCommas(this.state.Sqft)} </b></p>
            </div>
            <div className="col-md-6">
              <p className="card-text"> <b> {this.state.VacantOrOccupied} </b></p>
              <p className="card-text">Num Of Bedrooms: <b> {numberWithCommas(this.state.NumOfBedrooms)} </b></p>
              <p className="card-text">Num Of Bathrooms: <b> {numberWithCommas(this.state.NumOfBathrooms)} </b></p>
              <p className="card-text">Target Rent: <b> {numberWithCommas(this.state.TargetRent)} </b></p>
            </div>
          </div>
        </div>
      );
    }
  
    renderSectionHeader() {
      return (
        <div>
          <h4> Property Details
           <FloatingActionButton onClick={this.editSection.bind(this)} mini={true} className="addEditBtn" >
              <EditBtn />
            </FloatingActionButton>
          </h4>
        </div>);
    }
  
    render() {
      return (
        <div>
          <SectionContainer>
            <h2> {this.props.property.PropertyName} </h2>
            <br />
            <div>
              {this.renderSectionHeader()}
              {this.renderCardBlock()}
            </div>
          </SectionContainer>
        </div>
      );
    }
  
    renderPWMenuItems() {
      if (this.state.PropertyType == propertyTypes.Unit) {
        return (
          this.state.notConnectedPWUnitsList.map((item, index) => (
            this.renderPWPropertyMenuItem(item, index)
          ))
        );
      }
  
      return (
        this.state.notConnectedPWPropertiesList.map((item, index) => (
          this.renderPWPropertyMenuItem(item, index)
        ))
      );
    }
  
    renderPWPropertyMenuItem(item, index) {
      if (this.state.PropertyType == propertyTypes.Unit && item.UnitDetails != null) {
        return (<MenuItem value={index} primaryText={item.PropertyAddress + ' - Unit Details: ' + item.UnitDetails} />);
      } else if (this.state.PropertyType == propertyTypes.SingleFamilyHome && item.UnitDetails == null) {
        return (<MenuItem value={index} primaryText={item.PropertyAddress} />);
      } else if ((this.state.PropertyType == propertyTypes.Building)) {
        if (index == 0) {
          return (<MenuItem value={index} primaryText={item.PropertyAddress} />);
        } else if (item.PWBuildingID != this.state.notConnectedPWPropertiesList[index - 1].PWBuildingID) {
          return (<MenuItem value={index} primaryText={item.PropertyAddress} />);
        }
  
        return false;
      }
    }
  
  }
  