import React from 'react';
import PropTypes from 'prop-types';

/**
 * A stateless component which represents Toggle button
 */
const ToggleButton = props => {
    let toggleProps = {...props};
    delete toggleProps.parentClassName;

    let classes = ['jp-container-toggle-button',
        props.parentClassName ? props.parentClassName : null,
        props.disabled  ? 'disabled' : null
    ];
    return ( 
        <label className={classes.join(' ')} id={props.id+'Label'} htmlFor={props.id}> 
            <input type="checkbox" {...toggleProps}  />
            <span className="jp-toggle-button"><span className="jp-toggle-slider"/></span>
            <span className="jp-toggle-label-text">{props.label}</span>
        </label>  
    );
    
};

export default ToggleButton;

ToggleButton.propTypes = {
    /** Unique ID for the field. Required for web accessibility */
    id: PropTypes.string.isRequired,
    /** Set a value for check box */
    value: PropTypes.string,
    /** property to make toggle disabled for editing  */
    disabled : PropTypes.bool,
    /** function reference which manages toggle toggling */
    onChange : PropTypes.func,
    /** used to represent default state of toggle */
    checked : PropTypes.string,
    /** Label for the field */
    label: PropTypes.string,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string
};

ToggleButton.defaultProps = {
    disabled : false,
    parentClassName: ''
};