import React, { Component } from 'react';

export default class TrackSelector extends Component {
  constructor(props){
    super(props);
  }

  renderTracks(content){
    let contentObject = JSON.parse(content);
    return contentObject.project.wavetrack.map( (track, i) => {
        let checked = (i%2===0)? true : false;
        return (
          <tr key={`track${i}`}>
            <td><input type="checkbox" name="selectedTracks" value={i} defaultChecked={checked} /></td>
            <td>{track["$"].name}</td>
            <td>{(track.waveclip)? track.waveclip.length:'unknown'}</td>
            <td>{track["$"].channel}</td>
            <td>{track["$"].linked}</td>
            <td>{track["$"].rate}</td>
            <td>{track["$"].mute}</td>
            <td>{track["$"].solo}</td>
          </tr>
        );
    });
  }

  render(){
    return(
      <div id="trackSelector">
        <table className="ui celled striped table">
          <thead>
            <tr>
              <th></th>
              <th>軌道名稱</th>
              <th>擁有clip(s)數目</th>
              <th>channel</th>
              <th>linked</th>
              <th>rate</th>
              <th>mute</th>
              <th>solo</th>
            </tr>
          </thead>
          <tbody>
            {this.renderTracks(this.props.content)}
          </tbody>
        </table>
      </div>
    );
  }
}

@@ -131,20 +131,527 @@
 props);%0A
+    const contentObject = JSON.parse(props.content);%0A    const tracks = contentObject.project.wavetrack.length;%0A    const checkedBoxes = %5B%5D;%0A    for(var i = 0; i%3Ctracks; i++)%7B%0A      checkedBoxes.push( (i%252===0)? true : false );%0A    %7D%0A    this.state = %7B%0A      checkedBoxes%0A    %7D;%0A  %7D%0A%0A  onCheckboxChange(index)%7B%0A    const changedCheckedBoxes = this.state.checkedBoxes.slice(0);%0A    changedCheckedBoxes%5Bindex%5D = !changedCheckedBoxes%5Bindex%5D;%0A    this.setState(%7B%0A      checkedBoxes: changedCheckedBoxes%0A    %7D);%0A
   %7D%0A
-
 %0A  rende
@@ -668,16 +668,37 @@
 ntent)%7B%0A
+    let self = this;%0A
     let 
@@ -802,57 +802,8 @@
 %3E %7B%0A
-        let checked = (i%252===0)? true : false;%0A  
     
@@ -813,18 +813,16 @@
 eturn (%0A
-  
         
@@ -854,22 +854,33 @@
         
-  
 %3Ctd%3E
+%0A            
 %3Cinput t
@@ -893,16 +893,30 @@
 heckbox%22
+%0A             
  name=%22s
@@ -933,54 +933,176 @@
 cks%22
- value=%7Bi%7D defaultChecked=%7Bchecked%7D /%3E
+%0A              value=%7Bi%7D%0A              checked=%7Bself.state.checkedBoxes%5Bi%5D%7D%0A              onChange=%7Bself.onCheckboxChange.bind(this, i)%7D%0A            /%3E%0A          
 %3C/td%3E%0A
-  
     
@@ -1126,34 +1126,32 @@
 %22$%22%5D.name%7D%3C/td%3E%0A
-  
           %3Ctd%3E%7B(
@@ -1207,34 +1207,32 @@
 %3C/td%3E%0A          
-  
 %3Ctd%3E%7Btrack%5B%22$%22%5D.
@@ -1241,26 +1241,24 @@
 annel%7D%3C/td%3E%0A
-  
           %3Ct
@@ -1286,34 +1286,32 @@
 %3C/td%3E%0A          
-  
 %3Ctd%3E%7Btrack%5B%22$%22%5D.
@@ -1323,34 +1323,32 @@
 %3C/td%3E%0A          
- 
- 
 %3Ctd%3E%7Btrack%5B%22$%22%5D.
@@ -1350,34 +1350,32 @@
 %22$%22%5D.mute%7D%3C/td%3E%0A
-  
           %3Ctd%3E%7Bt
@@ -1399,34 +1399,30 @@
 td%3E%0A        
-  
 %3C/tr%3E%0A
-  
       );%0A   

store checkbox checked info