import * as React from "react";
import * as _ from "lodash";
import * as DefaultStyles from "./style";


export namespace CheckBox {
    /**
     * Background color can be passed in or can be left with a default
     * Each input needs a ID to be passed
     * The checkboxes can be disabled by passing the prop of readonly as true
     */
    export interface Props {
        onChange: (event: any) => void;
        id: string;
        value: boolean;
        readonly?: boolean;
        styles?: Styles;
        name?: string;
    }

    /**
     * The Checkbox has three elements that can be styled
     * The container is where you can change the width/height of the checkbox as well as the border
     * The Input is where the size of the Icon is controlled and the where the background color is also changed
     * The Input is where the Icon is cheanged in the content style
     */
    export interface Styles {
        CheckBoxContainer?: any;
        CheckBoxInput?: any;
        CheckBoxLabel?: any;
    }
}
const CheckBox = (props: CheckBox.Props): JSX.Element => {
    const Styles: CheckBox.Styles = _.merge(DefaultStyles, props.styles);
    return (
        <Styles.CheckBoxContainer id={props.id + 'checkbox-container-div'} name={props.name && props.name + 'checkbox-container-div'}>

            <Styles.CheckBoxInput
                id={props.id + '-checkbox-input'}
                checked={props.value}
                type={"checkbox"}
                onChange={props.onChange}
                disabled={props.readonly}
                data-testid={"input"}
                name={props.name && props.name + '-checkbox-input'}
            />
            <Styles.CheckBoxLabel htmlFor={props.id + '-checkbox-input'} id={props.id + 'checkbox-label'} name={props.name && props.name + 'checkbox-label'} />
        </Styles.CheckBoxContainer>
    );
};

export default CheckBox;