import React from 'react';
import {StyleProp, ViewStyle, View, Pressable} from 'react-native';
import {
  Typography,
  TypographyProps,
  WeightValues,
} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {Radio} from './components/Radio';

export interface RadioButtonProps {
  title: string;
  checked?: boolean;
  disabled?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  titleProps?: TypographyProps;
  titleWeight?: WeightValues;
  description?: string;
  error?: boolean;
  extraData?: string;
}

export function RadioButton({
  title,
  checked,
  disabled,
  onPress,
  style,
  titleProps = {},
  titleWeight = 'regular',
  description,
  error,
  extraData,
}: RadioButtonProps) {
  const {theme} = useTheme();
  const handlePress = () => onPress?.();

  return (
    <Pressable
      disabled={disabled}
      onPress={handlePress}
      style={[styles.checkContainer, style]}>
      <Radio
        checked={checked}
        disabled={disabled}
        error={error}
        onPress={handlePress}
      />
      <View style={styles.titleContainer}>
        <Typography
          color={
            disabled
              ? theme.text.neutral.disabled
              : error
              ? theme.text.feedback.error
              : theme.text.neutral.default
          }
          weight={titleWeight}
          {...titleProps}>
          {title}
        </Typography>
        {!!description && (
          <Typography variant="xs" color={theme.text.neutral.lighter}>
            {description}
          </Typography>
        )}
      </View>
      {!!extraData && (
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {extraData}
        </Typography>
      )}
    </Pressable>
  );
}

export * from './components/Radio';