import React, { ChangeEvent, ReactElement } from 'react';
import css from '../../utils/css';

import {
  ButtonLabel,
  ButtonHiddenInput,
  ButtonLabelText,
} from './StyledCheckbox';

import { CommonProps } from '../common';

export interface CheckboxButtonProps extends Omit<CommonProps, 'id'> {
  /**
   * Whether the checkbox is checked.
   */
  checked?: boolean;
  /**
   * Whether the checkbox is disabled.
   */
  disabled?: boolean;
  /**
   * Id of <input> element.
   */
  id?: string;
  /**
   * Name of <input> element, is used to refer to the form data for submission.
   */
  name?: string;
  /**
   * Set the handler to handle `change` event.
   */
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  /**
   * The size of the checkbox.
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Checkbox text.
   */
  text: ReactElement | string;
  /**
   * Checkbox input value.
   */
  value: string | number;
}

const CheckboxButton = ({
  text,
  value,
  checked,
  disabled,
  onChange,
  size = 'medium',
  name,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: CheckboxButtonProps): ReactElement => (
  <ButtonLabel
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    <ButtonHiddenInput
      type="checkbox"
      checked={checked}
      value={value}
      name={name}
      disabled={disabled}
      onChange={onChange}
      id={id}
    />
    <ButtonLabelText themeSize={size}>{text}</ButtonLabelText>
  </ButtonLabel>
);

export default CheckboxButton;