import React from 'react';
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton';

export default  class RadioGroup extends React.Component {

    constructor(props) {
      super();
      this.state = {
        selectedValue : ''
      };
    }

    getValue = () => {
        return this.state.selectedValue;
    };

    onChange = (event, value) => {
      
      let selectedObj;
      this.props.dataSource.forEach((obj) => {
        if(obj.value === value) {
          selectedObj = obj;
        }
        else{
          obj.selected = false;
        }
      });
      selectedObj.selected = !selectedObj.selected
      this.setState({
        selectedValue : selectedObj,
      });
      if(this.props.onChange) {
        this.props.onChange(this.props.dataSource);
      }
    };

    render() {
        var renderArray = [];
        this.props.dataSource.forEach((obj, i) => {
          if(obj.checkedComponent){
            var Component = obj.checkedComponent;
              renderArray.push(<div key={i} className="RadioGroupElement"><RadioButton
                                key={i}
                                value={obj.value}
                                label={obj.label}
                                style={{padding: '4px 0',width: '30%',display: 'inline-block'}}
                                checked={(obj.selected)?true:false}
                                disabled={this.props.disabled}
                              /><Component /></div>)
          }
          else{
             renderArray.push(<div className="RadioGroupElement" key={i}><RadioButton
                    key={i}
                    value={obj.value}
                    label={obj.label}
                    style={{padding: '4px 0'}}
                    name={this.props.name}
                    defaultSelected={this.props.defaultSelected}
                    onCheck={this.onChange.bind(this)}
                    checked={(obj.selected)?true:false}
                    valueSelected={this.state.selectedValue.value}
                    disabled={this.props.disabled}
                  /></div>)
          }
        })
        console.log(renderArray)
        return (
            <div>
              {renderArray}
            </div>
        );
    };
}
