import React from 'react';


export default class SecondaryNavBar extends React.Component {

  constructor(props)
  {
    super(props);
    this.onClickSaveDistrict = this.onClickSaveDistrict.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value: ''
    };

  }
  onClickSaveDistrict(districtid,name){
    console.log("on save district clicked");
    console.log(this.districtName.value);
    this.props.onModifyDistrict(districtid,name);

  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
  	var districtId = this.props.params.districtId;
  	var boundary = this.props.boundaryDetails[districtId];
  	var districtPath = "#" + boundary.path;
    var displayelement;
    this.state.value=boundary.name;
    if(sessionStorage.getItem('isAdmin'))
    {
      displayelement = <div><h4 className="brand-blue heading-border-left"> Modify Details</h4>
                       <form className="form-horizontal" role="form">
                        <div className="form-group">
                          <label className="control-label col-sm-2" htmlFor="name">District Name:</label>
                          <div className="col-sm-2">          
                            <input type="text" ref={(ref) => this.districtName = ref} className="form-control" id="name" defaultValue={boundary.name} onChange={(event)=>{this.handleChange(event)}}/>
                          </div>
                        </div>
                        </form>

                        <div className="col-md-2">
                          <button type="submit" className="btn btn-primary" onClick={() => {this.onClickSaveDistrict(districtId,"teset") }}>Save</button>
                          <button type="submit" className="btn btn-primary">Delete</button>

                        </div>
                       
                       


                     </div>
    }
    else
    {
      displayelement = <div><h4 className="heading-err heading-border-left brand-red"> <i className="fa fa-lock brand-red" aria-hidden="true"></i>  Insufficient Permissions</h4>
        <p>You need administrator privileges to modify Boundary details.</p>
        <h4 className="brand-blue heading-border-left"> District Details</h4>
        <p> Name: {boundary.name} </p></div>
    }
    return(
    	<div>
    		<ol className="breadcrumb">
    			<li className="active">{boundary.name}</li>
    		</ol>
    		{displayelement} 
    	</div>
    );
  }
}


@@ -298,16 +298,17 @@
 %7D;%0A%0A  %7D%0A
+%0A
   onClic
@@ -571,20 +571,25 @@
 nder() %7B
+    
 %0A  
-%09
+  
 var dist
@@ -625,25 +625,26 @@
 strictId;%0A  
-%09
+  
 var boundary
@@ -688,17 +688,18 @@
 tId%5D;%0A  
-%09
+  
 var dist
@@ -738,17 +738,17 @@
     var 
-d
+D
 isplayel
@@ -774,17 +774,19 @@
 te.value
-=
+ = 
 boundary
@@ -833,20 +833,16 @@
 Admin'))
-%0A   
  %7B%0A     
@@ -834,33 +834,33 @@
 dmin')) %7B%0A      
-d
+D
 isplayelement = 
@@ -851,37 +851,68 @@
 isplayelement = 
-%3Cdiv%3E
+(props) =%3E %0A        %3Cdiv%3E%0A          
 %3Ch4 className=%22b
@@ -975,27 +975,16 @@
         
-          
- 
 %3Cform cl
@@ -1032,34 +1032,24 @@
             
-          
 %3Cdiv classNa
@@ -1065,26 +1065,16 @@
 group%22%3E%0A
-          
         
@@ -1173,34 +1173,24 @@
             
-          
 %3Cdiv classNa
@@ -1210,34 +1210,24 @@
 %3E          %0A
-          
             
@@ -1357,66 +1357,11 @@
 ame%7D
- onChange=%7B(event)=%3E%7Bthis.handleChange(event)%7D%7D/%3E%0A        
+/%3E%0A
     
@@ -1364,34 +1364,32 @@
                 
-  
 %3C/div%3E%0A         
@@ -1389,34 +1389,24 @@
             
-        
-  
 %3C/div%3E%0A     
@@ -1414,26 +1414,16 @@
         
-         
- 
 %3C/form%3E%0A
@@ -1423,26 +1423,16 @@
 /form%3E%0A%0A
-          
         
@@ -1476,34 +1476,24 @@
             
-          
 %3Cbutton type
@@ -1620,34 +1620,24 @@
             
-          
 %3Cbutton type
@@ -1690,17 +1690,16 @@
 button%3E%0A
-%0A
         
@@ -1708,88 +1708,15 @@
     
-          
 %3C/div%3E%0A
-                       %0A                       %0A%0A%0A             
     
@@ -1740,20 +1740,16 @@
     else
-%0A   
  %7B%0A     
@@ -1749,17 +1749,17 @@
 %7B%0A      
-d
+D
 isplayel
@@ -1766,21 +1766,52 @@
 ement = 
-%3Cdiv%3E
+(props) =%3E %0A        %3Cdiv%3E%0A          
 %3Ch4 clas
@@ -1960,16 +1960,18 @@
         
+  
 %3Cp%3EYou n
@@ -2031,16 +2031,18 @@
 ls.%3C/p%3E%0A
+  
         
@@ -2103,32 +2103,34 @@
 ct Details%3C/h4%3E%0A
+  
         %3Cp%3E Name
@@ -2150,13 +2150,21 @@
 ame%7D
- 
 %3C/p%3E
+%0A        
 %3C/di
@@ -2168,24 +2168,25 @@
 /div%3E%0A    %7D%0A
+%0A
     return(%0A
@@ -2189,17 +2189,18 @@
 rn(%0A    
-%09
+  
 %3Cdiv%3E%0A  
@@ -2201,18 +2201,20 @@
 iv%3E%0A    
-%09%09
+    
 %3Col clas
@@ -2241,11 +2241,14 @@
     
+  
-%09%09%09
+    
 %3Cli 
@@ -2291,18 +2291,20 @@
 li%3E%0A    
+   
-%09%09
+ 
 %3C/ol%3E%0A  
@@ -2309,12 +2309,14 @@
     
-%09%09%7Bd
+    %3CD
 ispl
@@ -2328,16 +2328,17 @@
 ment
-%7D 
+/%3E
 %0A    
-%09
+  
 %3C/di

refresh input button