import type { ReactElement, ReactNode } from 'react';
import React from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import type { IconName } from '../Icon';
import { Circle, InnerCircle, StyledRadio } from './StyledRadio';

interface RadioProps {
  /**
   * Whether the radio is checked.
   */
  checked?: boolean;
  /**
   * Press event handler.
   */
  onPress: () => void;
  /**
   * Radio text.
   */
  text: string;
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Radio subtext.
   */
  subText?: string;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Idle background color of the Radio.
   */
  inactiveIntent?: 'light' | 'dark';
  /**
   * Children to be rendered inside the component.
   */
  children?: ReactNode;
  /**
   * Prefix to be rendered before the radio text.
   */
  prefix?: IconName | ReactElement;
}

const RadioCircle = ({
  checked,
  text,
}: Pick<RadioProps, 'text' | 'checked'>) => (
  <Circle>
    {checked && <InnerCircle testID={`${text}-selected-circle`} />}
  </Circle>
);

const Radio = ({
  text,
  checked = false,
  onPress,
  style,
  subText,
  testID,
  inactiveIntent = 'light',
  children,
  prefix,
}: RadioProps): ReactElement => (
  <StyledRadio
    onPress={onPress}
    selected={checked}
    title={text}
    subtitle={subText}
    prefix={prefix}
    suffix={<RadioCircle checked={checked} text={text} />}
    style={style}
    testID={testID}
    themeIntent={inactiveIntent}
    themeChecked={checked}
  >
    {children}
  </StyledRadio>
);

export default Radio;