import React, { ReactElement, ReactNode, ChangeEvent } from 'react';
import css from '../../utils/css';
import { StyledInput, StyledLabel, StyledText } from './StyledRadio';

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

export interface RadioProps extends CommonProps {
  /**
   * Whether the radio is checked.
   */
  checked?: boolean;
  /**
   * Whether the radio 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;
  /**
   * Change event handler. Use `event.target.checked` to see whether the radio will be changed to checked.
   */
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  /**
   * Radio text.
   */
  text: ReactNode;
  /**
   * Radio input value.
   */
  value: string | number;
}

const Radio = ({
  text,
  value,
  disabled = false,
  checked,
  onChange,
  name,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: RadioProps): ReactElement => (
  <StyledLabel
    themeDisabled={disabled}
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    <StyledInput
      type="radio"
      value={value}
      checked={checked}
      onChange={onChange}
      disabled={disabled}
      name={name}
      themeDisabled={disabled}
      id={id}
    />
    <StyledText>{text}</StyledText>
  </StyledLabel>
);

export default Radio;