import React, { memo } from 'react';
import MuiRadio from '@mui/material/Radio';
import type { RadioProps as MuiRadioProps } from '@mui/material/Radio';
import FormControlLabel from '@mui/material/FormControlLabel';
import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
import clsx from 'clsx';
import createClasses from './styles';

export interface RadioProps extends Omit<MuiRadioProps, 'onChange'> {
  /**
   * The active state of the radio button.
   */
  checked?: boolean;
  /**
   * The disabled state of the radio button.
   */
  disabled?: boolean;
  /**
   * Props which will be supplied directly into the form control label component.
   */
  formControlLabelProps: Omit<FormControlLabelProps, 'control'>;
  /**
   * An error state flag for the radio button component.
   */
  error?: boolean;
  /**
   * Callback fired when the state is changed.
   * @param event
   * The event source of the callback. You can pull out the new value by accessing
   * @param checked
   * The new state
   */
  onChange?: MuiRadioProps['onChange'];
}

const Radio = (props: RadioProps) => {
  const { checked, disabled, error, formControlLabelProps, onChange } = props;

  const styles = createClasses();

  return (
    <FormControlLabel
      {...formControlLabelProps}
      className={clsx(
        styles.root,
        {
          [styles.error]: error
        },
        formControlLabelProps?.classes
      )}
      data-testid={'radioFormWrapper'}
      control={<MuiRadio checked={checked} disabled={disabled} onChange={onChange} />}
    />
  );
};

const m = memo(Radio);
export { m as Radio };