import React, {JSX} from 'react';
import {View, StyleSheet, StyleProp, ViewStyle} from 'react-native';
import {CustomPressable} from '../Button';
import {Text} from '../Text';
import {Colors, fontSz, ms} from '../../utils';
import {useSDKConfig} from '../../contexts/SDKConfigContext';

interface RadioButtonProps {
  label: string | JSX.Element;
  selected: boolean;
  onPress: () => void;
  containerStyle?: StyleProp<ViewStyle>;
}

const RadioButton: React.FC<RadioButtonProps> = ({
  label,
  selected,
  onPress,
  containerStyle,
}) => {
  const {primaryColor} = useSDKConfig();
  return (
    <CustomPressable onPress={onPress} activeOpacity={0.8}>
      <View style={[styles.radioButton, containerStyle]}>
        {!selected && (
          <View
            style={[
              styles.radioButtonInner,
              {
                borderColor: primaryColor,
              },
            ]}
          />
        )}
        {selected && (
          <View
            style={[
              styles.radioButtonInner,
              {
                borderColor: primaryColor,
              },
            ]}>
            <View
              style={[
                styles.radioButtonSelected,
                {
                  backgroundColor: primaryColor,
                  borderColor: primaryColor,
                },
              ]}
            />
          </View>
        )}

        {typeof label === 'string' ? (
          <Text
            fontSize={fontSz(12)}
            fontFamily="Gordita-Medium"
            fontWeight="400"
            text={`${label}`}
            color={Colors.inputBackground}
          />
        ) : (
          label
        )}
      </View>
    </CustomPressable>
  );
};

const styles = StyleSheet.create({
  radioButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: ms(5),
  },
  radioButtonInner: {
    width: ms(22),
    height: ms(22),
    borderRadius: ms(22 / 2),
    borderWidth: ms(1.5),
    marginRight: ms(10),
    justifyContent: 'center',
    alignItems: 'center',
  },
  radioButtonSelected: {
    width: '60%',
    height: '60%',
    borderRadius: ms(22 / 2),
  },
});

export default RadioButton;