import React, { Component } from 'react';

import GBox from 'grommet/components/Box';
import GParagraph from 'grommet/components/Paragraph';
import GHeading from 'grommet/components/Heading';

import CLineList from '../containers/CLineList';

const Sidebar = ({ mode, toggleMode, numberOfBends, totalLength }) => {
  const style = { padding: '0px', margin: '0px', marginBottom: '5px', WebkitUserSelect: 'none' };
  return (
    <GBox style={{ width: '300px' }}>
      <GBox pad="medium">
        <GHeading tag="h3" style={{ WebkitUserSelect: 'none' }}>Details</GHeading>
        <GParagraph size="small" style={style}># of Bends: { numberOfBends }</GParagraph>
        <GParagraph size="small" style={style}>Total Length: { totalLength }</GParagraph>
      </GBox>
      <CLineList />
    </GBox>
  );
};

export default Sidebar;

@@ -241,43 +241,387 @@
 ;%0A%0Ac
-onst Sidebar = (%7B mode, toggleMode,
+lass Sidebar extends React.Component %7B%0A  constructor(props) %7B%0A    super(props);%0A%0A    this.handleSelect = this.handleSelect.bind(this);%0A%0A    this.state = %7B%0A      type: undefined,%0A      color: undefined,%0A    %7D;%0A  %7D%0A%0A  handleSelect(e) %7B%0A    const name = e.target.name;%0A    const value = e.target.value;%0A%0A    this.setState(%7B%0A      %5Bname%5D: value,%0A    %7D);%0A  %7D%0A%0A  render() %7B%0A    const %7B
  num
@@ -649,17 +649,28 @@
 th %7D
-)
  =
-%3E %7B%0A
+ this.props;%0A%0A 
   
+ 
 cons
@@ -761,16 +761,18 @@
 one' %7D;%0A
+  
   return
@@ -774,16 +774,18 @@
 eturn (%0A
+  
     %3CGBo
@@ -814,16 +814,18 @@
 px' %7D%7D%3E%0A
+  
       %3CG
@@ -850,16 +850,18 @@
         
+  
 %3CGHeadin
@@ -927,32 +927,34 @@
 eading%3E%0A        
+  
 %3CGParagraph size
@@ -980,9 +980,14 @@
 le%7D%3E
-#
+Number
  of 
@@ -1020,24 +1020,26 @@
 GParagraph%3E%0A
+  
         %3CGPa
@@ -1112,24 +1112,534 @@
 GParagraph%3E%0A
+          %3CGParagraph size=%22small%22 style=%7Bstyle%7D%3E%0A            Type:%0A            %3Cselect name=%22type%22 onChange=%7Bthis.handleSelect%7D%3E%0A              %3Coption%3EType A%3C/option%3E%0A              %3Coption%3EType B%3C/option%3E%0A            %3C/select%3E%0A          %3C/GParagraph%3E%0A          %3CGParagraph size=%22small%22 style=%7Bstyle%7D%3E%0A            Color:%0A            %3Cselect name=%22color%22 onChange=%7Bthis.handleSelect%7D%3E%0A              %3Coption%3EColor A%3C/option%3E%0A              %3Coption%3EColor B%3C/option%3E%0A            %3C/select%3E%0A          %3C/GParagraph%3E%0A  
       %3C/GBox
@@ -1640,16 +1640,18 @@
 %3C/GBox%3E%0A
+  
       %3CC
@@ -1662,24 +1662,26 @@
 List /%3E%0A    
+  
 %3C/GBox%3E%0A  );
@@ -1682,13 +1682,18 @@
 %3E%0A  
+ 
+ 
 );%0A
+  %7D%0A
 %7D
-;
 %0A%0Aex
@@ -1714,8 +1714,9 @@
 idebar;%0A
+%0A

Transform sidebar into traditional class and add type and color selectors