import React, { Component, PropTypes } from 'react';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';

require('./app-intent-form.scss');

export default class AppIntentForm extends Component {

  renderTabHeaders(appIntent) {
    const titles = appIntent.map((_value, key) => key);
    return (<TabList>
      {titles.map(t => <Tab key={t}>{t}</Tab>)}
    </TabList>);
  }

  renderTabPanels(appIntent) {
    const newRadarValue = this.props.newRadarValue;
    function keypress(layer, metric, e) {
      newRadarValue(layer, metric, e.currentTarget.value);
    }
    return appIntent.map((dataMap, layer) => {
      const inputs = dataMap.map((value, metric) => {
        return (<div key={metric}>
          <label>{metric}:</label> <input type="number" min="0.25" step="0.25" onChange={e => {
            keypress(layer, metric, e);
          } } value={value} />
        </div>);
      });
      return (<TabPanel key={layer}>
        {inputs}
      </TabPanel>);
    });
  }
  render() {
    return (<div className="app-intent-form">
      <Tabs>
        {this.renderTabHeaders(this.props.appIntent)}
        {this.renderTabPanels(this.props.appIntent)}
      </Tabs>
    </div>);
  }
}

AppIntentForm.propTypes = {
  appIntent: PropTypes.object.isRequired,
  newRadarValue: PropTypes.func.isRequired,
};

@@ -9,34 +9,8 @@
 eact
-, %7B Component, PropTypes %7D
  fro
@@ -118,65 +118,16 @@
 );%0A%0A
-export default class AppIntentForm extends Component %7B%0A%0A 
+function
  ren
@@ -145,34 +145,32 @@
 rs(appIntent) %7B%0A
-  
   const titles =
@@ -207,18 +207,16 @@
 %3E key);%0A
-  
   return
@@ -227,18 +227,16 @@
 abList%3E%0A
-  
     %7Btit
@@ -273,18 +273,16 @@
 /Tab%3E)%7D%0A
-  
   %3C/TabL
@@ -292,14 +292,19 @@
 %3E);%0A
-  
 %7D%0A%0A
- 
+function
  ren
@@ -329,173 +329,27 @@
 tent
-) %7B%0A    const newRadarValue = this.props.newRadarValue;%0A    function keypress(layer, metric, e) %7B%0A      newRadarValue(layer, metric, e.currentTarget.value);%0A    %7D%0A  
+, newRadarValue) %7B%0A
   re
@@ -393,18 +393,16 @@
 %3E %7B%0A    
- 
- 
 const in
@@ -443,26 +443,16 @@
  =%3E 
-%7B%0A 
+(%0A
       
- return (
 %3Cdiv
@@ -466,18 +466,16 @@
 etric%7D%3E%0A
-  
         
@@ -574,18 +574,21 @@
     
-  keypress
+newRadarValue
 (lay
@@ -600,21 +600,39 @@
 etric, e
+.currentTarget.value
 );%0A
-  
         
@@ -662,35 +662,27 @@
     
-  
 %3C/div%3E
-);
 %0A    
-  %7D
+)
 );%0A    
-  
 retu
@@ -714,18 +714,16 @@
 %3E%0A      
-  
 %7Binputs%7D
@@ -723,26 +723,24 @@
 inputs%7D%0A    
- 
- 
 %3C/TabPanel%3E)
@@ -745,45 +745,70 @@
 %3E);%0A
-  
   %7D);%0A
-  %7D%0A  render() %7B%0A    return (
+%7D%0A%0Aexport default (%7B appIntent, newRadarValue %7D) =%3E (%0A  
 %3Cdiv
@@ -841,18 +841,16 @@
 m%22%3E%0A    
-  
 %3CTabs%3E%0A 
@@ -850,32 +850,25 @@
 Tabs%3E%0A      
-  %7Bthis.
+%7B
 renderTabHea
@@ -872,27 +872,16 @@
 Headers(
-this.props.
 appInten
@@ -894,16 +894,9 @@
     
-  %7Bthis.
+%7B
 rend
@@ -911,33 +911,35 @@
 els(
-this.props.appIntent
+appIntent, newRadarValue
 )%7D%0A
-  
     
@@ -946,26 +946,24 @@
 %3C/Tabs%3E%0A
-  
   %3C/div%3E
 );%0A  %7D%0A%7D
@@ -958,131 +958,8 @@
 div%3E
+%0A
 )
-;%0A  %7D%0A%7D%0A%0AAppIntentForm.propTypes = %7B%0A  appIntent: PropTypes.object.isRequired,%0A  newRadarValue: PropTypes.func.isRequired,%0A%7D
 ;%0A

Refactor AppIntentForm