import { Controller, useFormContext } from 'react-hook-form';
import { StyleProp, TextStyle, View } from 'react-native';
import type { ReactNativeRadioFormProps } from 'react-native-simple-radio-button';
import RadioForm from 'react-native-simple-radio-button';
import { tw } from '../../core/tailwind';

type FormRadioButtonGroupProps = ReactNativeRadioFormProps & {
  name: string;
  options: {
    label: string;
    value: string;
  }[];
  labelStyle?: StyleProp<TextStyle>;
  disabled: boolean;
  // This is used to access a property from "options" above
  returnField?: 'label' | 'value';
};

export function FormRadioButtonGroup(props: FormRadioButtonGroupProps) {
  const { name, options, disabled = false, returnField, labelStyle, ...restOfProps } = props;
  const { control } = useFormContext();

  return (
    <Controller
      control={control}
      render={({ field: { onChange, value } }) => {
        // I show an empty view here because the RadioForm component does not update when the default value is changed
        if (!value) {
          return <View />;
        }
        return (
          <RadioForm
            radio_props={options}
            initial={options.findIndex((i) => i.value === value) ?? 0}
            buttonColor={tw.color('bg-gray-600')}
            // @ts-ignore
            selectedButtonColor={tw.color('bg-primary')}
            buttonSize={10}
            borderWidth={1}
            onPress={(id) => onChange(returnField ? options.find((o) => o.value === id)?.[returnField] : id)}
            labelStyle={[tw`text-[#8B8989] font-medium text-xs`, labelStyle]}
            disabled={disabled}
            // **BEWARE**
            // Setting this property to true causes BLANK SCREEN for the user
            // due to some unknown animation bugs in React Native!!
            // Reference: https://github.com/react-navigation/react-navigation/issues/1805#issuecomment-309204414
            animation={false}
            {...restOfProps}
          />
        );
      }}
      name={name}
    />
  );
}