import { Controller, useFormContext } from 'react-hook-form';
import { StyleProp, View, ViewStyle } from 'react-native';
import { Text } from '../../components/form/Text';
import { tw } from '../../core/tailwind';
import { Select } from '../form/Select';

// "onSelect" is omitted here because this uses it's own handler
type FormSelectProps = Omit<React.ComponentProps<typeof Select>, 'onSelect'> & {
  name: string;
  label?: string;
  required?: boolean;
  labelStyle?: StyleProp<ViewStyle>;
};

export function FormSelect({ name, label, required, labelStyle, ...restOfProps }: FormSelectProps) {
  const form = useFormContext();
  const errors = form?.formState?.errors || '';
  const errorMessage = errors[name]?.message?.toString();

  return (
    <View>
      {label ? (
        <View style={tw`flex-row`}>
          <Text style={[tw`ml-4 mb-1 text-dark text-xs font-bold`, labelStyle]}>{label}</Text>
          <Text style={tw.style({ hidden: !required, color: 'red' })}>*</Text>
        </View>
      ) : null}
      <Controller
        control={form.control}
        render={({ field: { value, onChange } }) => (
          <Select {...restOfProps} onSelect={onChange} defaultOption={value} />
        )}
        name={name}
      />
      {errorMessage ? <Text style={tw`text-red-500`}>{errorMessage}</Text> : null}
    </View>
  );
}