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

const style = {
    label: {
        display: 'inline',
        fontFamily: 'RobotoCondensed-Regular, sans-serif',
        userSelect: 'none', // disable text selection
        fontWeight: 'bold'
    },
    checkbox: {
        display: 'none'
    },
    checkboxPlusLabel: {
        backgroundColor: '#fafafa',
        border: '1px solid #cacece',
        // boxShadow: '0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)',
        padding: '18px',
        borderRadius: '3px',
        display: 'inline-block',
        position: 'relative'
    },
    checkboxCheckedPlusLabel: {
        backgroundColor: 'red',
        border: '1px solid #adb8c0',
        boxShadow: [
            '0 1px 2px rgba(0,0,0,0.05)',
            'inset 0px -15px 10px -12px rgba(0,0,0,0.05)',
            'inset 15px 10px -12px rgba(255,255,255,0.1)'
        ].join(', '),
        color: 'white'
    },
    checkboxCheckedPlusLabelAfter: {
        fontSize: '28px',
        position: 'absolute',
        top: '0px',
        left: '6px',
        color: '#99a1a7'
    }
};

export default function CheckboxButton(props) {
    let id = props.id;
    if (!props.id) {
        id = String(Math.round(Math.random() * 10000000000000000));
    }

    const checkboxStyle = {
        ...style.checkbox
    };

    const labelStyle = {
        ...style.label,
        ...style.checkboxPlusLabel,
        ...(props.checked ? style.checkboxCheckedPlusLabel : {}),
        ...(props.style || {}),
        ...(props.checked ? props.checkedStyle : {})
    };

    const labelAfterStyle = {
        ...(props.checked ? style.checkboxCheckedPlusLabelAfter : {})
    };

    return (
        <div>
            <input style={checkboxStyle} type="checkbox" id={id} checked={props.checked} onChange={props.onChange} />
            <label style={labelStyle} htmlFor={id}>{props.label}</label>
            <div style={labelAfterStyle} />
        </div>
    );
}
CheckboxButton.propTypes = {
    label: PropTypes.string.isRequired,
    id: PropTypes.string,
    checked: PropTypes.bool.isRequired,
    onChange: PropTypes.func.isRequired,
    style: PropTypes.object,
    checkedStyle: PropTypes.object
};