import cn from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { ICheckboxProps } from "./form.d";
import Form from "./form-tags";

const Checkbox = (props: ICheckboxProps) => {
  const {
    checked,
    className,
    disabled,
    error,
    formClassName,
    help,
    label,
    labelClassName,
    name,
    onChange,
    readOnly,
    required,
    escapeHelpContent
  } = props;
  const testId = props["data-testid"] || "honeyui-input";

  return (
    <Form.Group className={cn("form-check", formClassName)}>
      <Form.CheckboxTag
        labelClassName={labelClassName}
        label={label}
        className={className}
        name={name}
        error={error}
        onChange={onChange}
        data-testid={testId}
        checked={checked}
        readOnly={readOnly}
        disabled={disabled}
        required={required}
      />
      <Form.HelpTag data-testid={`${testId}-help`} name={name} escapeContent={escapeHelpContent}>
        {help}
      </Form.HelpTag>
      <Form.ErrorTag data-testid={`${testId}-error`} name={name}>
        {error}
      </Form.ErrorTag>
    </Form.Group>
  );
};

Checkbox.displayName = "Checkbox";

Checkbox.defaultProps = {
  disabled: false,
  readOnly: false,
  required: false
};

Checkbox.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  error: PropTypes.string,
  formClassName: PropTypes.string,
  help: PropTypes.string,
  label: PropTypes.string.isRequired,
  labelClassName: PropTypes.string,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func,
  readOnly: PropTypes.bool,
  required: PropTypes.bool,
  escapeHelpContent: PropTypes.bool
};

export default Checkbox;