import React, { ReactElement, ReactNode, ChangeEvent } from 'react';
import css from '../../utils/css';
import {
  StyledRadioButton,
  StyledRadioButtonInput,
  StyledRadioButtonLabel,
} from './StyledRadio';

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

export interface RadioButtonProps extends Omit<CommonProps, 'id'> {
  /**
   * Whether the radio is checked.
   */
  checked?: boolean;
  /**
   * Whether the radio is disabled.
   */
  disabled?: boolean;
  /**
   * Id of <input> element.
   */
  id?: string;
  /**
   * Visual intent color to apply to radio button.
   */
  intent?: 'basic' | 'primary' | 'danger' | 'success' | 'warning' | 'error';
  /**
   * Radio name, used for form submission.
   */
  name?: string;
  /**
   * Change event handler. Use `event.target.checked` to see whether the radio will be changed to checked.
   */
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  /**
   * Size of the button.
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Radio text.
   */
  text: ReactNode;
  /**
   * Radio input value when do form submission.
   */
  value: string | number;
}

const RadioButton = ({
  name,
  text,
  value,
  disabled,
  checked,
  onChange,
  size = 'medium',
  id,
  intent = 'basic',
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: RadioButtonProps): ReactElement => (
  <StyledRadioButtonLabel
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    <StyledRadioButtonInput
      type="radio"
      value={value}
      checked={checked}
      onChange={onChange}
      disabled={disabled}
      name={name}
      themeStatus={disabled === true ? 'disabled' : 'enabled'}
      themeIntent={intent}
      id={id}
    />
    <StyledRadioButton themeSize={size}>{text}</StyledRadioButton>
  </StyledRadioButtonLabel>
);

export default RadioButton;
