import React from 'react';
import {Pressable, PressableProps, View} from 'react-native';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export interface RadioProps {
  checked?: boolean;
  disabled?: boolean;
  error?: boolean;
  onPress?: () => void;
  pointerEvents?: PressableProps['pointerEvents'];
  hitSlop?: PressableProps['hitSlop'];
}

export function Radio({
  checked,
  disabled,
  error,
  onPress,
  pointerEvents,
  hitSlop,
}: RadioProps) {
  const {theme} = useTheme();
  const borderColor = error
    ? theme.text.feedback.error
    : disabled
    ? theme.action.background.brand.disabled
    : checked
    ? theme.button.background.primary.default
    : theme.border.neutral.default;

  return (
    <Pressable
      onPress={onPress}
      pointerEvents={pointerEvents}
      disabled={disabled}
      hitSlop={hitSlop}>
      <View
        style={[
          styles.check,
          {backgroundColor: theme.background.elements.default, borderColor},
        ]}>
        {!error && checked ? (
          <View
            style={[
              styles.innerCheck,
              {
                backgroundColor: disabled
                  ? theme.action.background.brand.disabled
                  : theme.button.background.primary.default,
              },
            ]}
            testID="icon-button-checked"
          />
        ) : null}
      </View>
    </Pressable>
  );
}
