import * as _ from "lodash";
import * as React from "react";

import { SelectAction } from "../../utilities/states";

interface ICheckboxProps {
  id: string;
  onSelect?: (selectAction: SelectAction) => void;
}

export const Checkbox = ({ id, onSelect }: ICheckboxProps) => (
  <div className="checkbox__container">
    <div className="checkbox">
      <input
        id={id} 
        type="checkbox"
        {..._.isFunction(onSelect) && {
          onChange: (event) => {
            if (event.target.checked) {
              onSelect(SelectAction.Select);
            } else {
              onSelect(SelectAction.Deselect);
            }
          }
        }} />
      <label htmlFor={id} />
    </div>
  </div>
)