import React from 'react';
import Switch from 'react-switch';


export default class switchtoggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      onHandleColor: '#fff',
      offHandleColor: '#fff',
      offColor: '#eeeeee',
      onColor: '#d73220',
      colorCk: '#eeeeee',
      colorUnck: '#000000',
      value: '',
      checked: false

    };

  }



  render() {
    const { onHandleColor, offHandleColor, offColor, onColor, colorCk, colorUnck } = this.state;
    const { id, col, attributes,value, label, datos,onChange} = this.props;
    const stilo = {display: !!attributes.hidden ?  attributes.hidden :'unset' };
    return (
      <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
        <div className="form-group">
          <label htmlFor={id}>{label}</label>
          <label htmlFor={datos.id}>
            <span>{datos.text}</span>
            <Switch
              checked={value}
              onChange={(checked)=>{onChange(checked, id)}}
              uncheckedIcon={
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    height: "100%",
                    fontSize: datos.fontSize,
                    color: { colorUnck },
                    paddingRight: 2
                  }}
                >
                  NO
            </div>
              }
              checkedIcon={
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    height: "100%",
                    fontSize: datos.fontSize,
                    color: { colorCk },
                    paddingRight: 2
                  }}
                >
                  SI
            </div>
              }
              className="react-switch"
              id={datos.id}
              offColor={offColor}
              onColor={onColor}
              onHandleColor={onHandleColor}
              offHandleColor={offHandleColor}
              disabled={attributes.readOnly}
              height={datos.height}
              width={datos.width}
            />
          </label>
        </div>
      </div>
    );
  }
}