import { color } from 'highcharts';
import React, { Fragment, Component } from 'react';
import { RadioGroup, RadioButton, ReversedRadioButton } from 'react-radio-buttons';


const RadioBoton = ({ name, clase, evento, leyenda, indice, chequeado, value, deshabilitado }) => (
  <div className="custom-control custom-radio" style={{ display: 'inline-flex', width: '100%' }} key={indice}>

    <input type="radio"
      id={name}
      className="custom-control-input"
      value={value}
      checked={chequeado}
      onChange={evento} name={name}
      disabled={deshabilitado} />
    <label className="custom-control-label" htmlFor={name} >
      {leyenda}

    </label>
  </div>
)


const SelectRadio = ({ opciones, selectValue, onChange, deshabilitado }) => {

  return opciones.map((item, index) => {
    let chequeado = (selectValue === item.value);
    return <RadioBoton key={index}
      name={item.text}
      evento={onChange}
      leyenda={item.text}
      indice={index}
      chequeado={chequeado}
      value={item.value}
      deshabilitado={deshabilitado}
    />
  })
}


export default class radiobutton extends Component {

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

  render() {
    const { id, col, attributes, datos, onChange, value, label, horizontal, labelEx } = this.props;
    const { rootColor, pointColor } = this.state;
    const stilo = (horizontal == true) ? { display: 'inline-flex', width: '100%' } : {};
    const deshabilitado = (attributes.readOnly != undefined) ? attributes.readOnly : false;

    const stilo2 = { display: !!attributes.hidden ? attributes.hidden : 'unset' };

    return (

      <div className={"col-sm-" + col + " col-md-" + col} style={stilo2}>
        <div className={"form-group"} style={{ borderStyle: "none" }}>
          <label htmlFor={id}>{label}</label>
          <div style={stilo}>
            <SelectRadio opciones={datos} selectValue={value} onChange={(e) => { onChange(e, id) }} deshabilitado={deshabilitado} />
          </div>
          {labelEx !== null && labelEx !== undefined && <label style={{ color: 'red' }}>{labelEx}</label>}
        </div>
      </div>

    );
  }
}


{/*
export default class radiobutton extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedValue: 'ND',
      radioOptions: [{
        name: 'optTarjeta', value: 'DebitCard', text: 'Tipo', horizontal: true,
        opciones: [{ value: 'CreditCard', text: 'Credit Card', reverso: true },
        { value: 'DebitCard', text: 'Debit Card', reverso: true }]
      }],
      rootColor:'#10a599', pointColor:'#10a599'
    };
  }


  render() {
    const { id, col, attributes, value, label, datos, onChange } = this.props;
    const {rootColor, pointColor} = this.state;
    var opciones = datos[0].opciones.map(function (dato, index) {
      if (dato.reverso) {
        return (<ReversedRadioButton  key = {index} value={dato.value} rootColor= {rootColor} pointColor = {pointColor}  disabled = {attributes.readOnly}  iconSize = {16} iconInnerSize={6.25}> {dato.text} </ReversedRadioButton>)

      } else {
        return (<RadioButton  key = {index} value={dato.value}  iconSize = {16} iconInnerSize={6.25} > {dato.text} </RadioButton>)
      }
    });

    return (
      <Fragment>

        <div className={"col-sm-" + col + " col-md-" + col}>
          <div className="form-group">
            <label htmlFor={id}>{label}</label>
            <RadioGroup name={datos[0].name} onChange={(value)=>{onChange(value, id)}} horizontal={datos[0].horizontal} value={value}>
              {opciones}
            </RadioGroup>

          </div>
        </div>
      </Fragment>
    );
  }
}*/}