import React from 'react';

import { CheckboxFieldBox } from './CheckboxField.styled';

export type CheckboxFieldProps = {
  checked: boolean;
  disabled?: boolean;
  error?: boolean;
  id?: string;
  onChange?: (checked: boolean) => void;
  size?: number;
  text: React.ReactNode;
};

export const CheckboxField: React.FunctionComponent<CheckboxFieldProps> = ({
  onChange,
  checked = false,
  disabled = false,
  text,
  size = 16,
  error = false,
  id,
}) => {
  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    typeof onChange === 'function' && onChange(event.target.checked);
  };
  const dataTestId = `CheckboxField-input-${checked ? 'checked' : 'unchecked'}-${
    error ? 'error' : 'noError'
  }-${disabled ? 'disabled' : 'enabled'}`;

  return (
    <CheckboxFieldBox
      data-testid="CheckboxField-CheckboxFieldBox"
      disabled={disabled}
      error={error}
      size={size}
    >
      <input
        checked={checked}
        data-testid={dataTestId}
        disabled={disabled}
        id={id}
        type="checkbox"
        onChange={handleOnChange}
      />
      {text}
    </CheckboxFieldBox>
  );
};