import { SerializableValue } from '@bit-ui-libs/common';
import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
import { tw } from '../../core/tailwind';
import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';

interface RadioButtonProps {
  disabled?: boolean;
  onPress?: () => void;
  label: string;
  name: SerializableValue;
  style?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
}

export function RadioButton(props: RadioButtonProps) {
  const { disabled, onPress, label, name, style, labelStyle } = props;
  return (
    <RadioButtonContext.Consumer>
      {(context?: RadioButtonContextType) => {
        const checked = context?.name === name;

        return (
          <TouchableOpacity
            onPress={() => {
              context?.onValueChange(name);
              onPress?.();
            }}
            disabled={disabled}
            style={[tw`flex-row items-center`, style]}
          >
            <View
              style={tw.style('w-4 h-4 bg-light-100 border border-primary rounded-full items-center justify-center', {
                'border-gray-500': !checked,
              })}
            >
              {checked ? (
                <View
                  style={[
                    tw.style('bg-primary rounded-full', {
                      'bg-light-100': !checked,
                    }),
                    { width: 10, height: 10 },
                  ]}
                />
              ) : null}
            </View>
            <Text style={[tw`ml-1 text-sm font-medium text-dark-100 opacity-50`, labelStyle]}>{label}</Text>
          </TouchableOpacity>
        );
      }}
    </RadioButtonContext.Consumer>
  );
}