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

type Props = {
  name: string;
  maxStars: number;
  disabled?: boolean;
};

export function FormStarRatting(props: Props) {
  const { name, maxStars, disabled = false, ...restOfProps } = props;
  const { control, formState } = useFormContext();
  const errors = formState?.errors || '';
  const errorMessage = errors[name]?.message?.toString();

  return (
    <View>
      <Controller
        control={control}
        render={({ field: { onChange, value } }) => {
          return (
            <StarRating {...restOfProps} rating={value} onChange={onChange} maxStars={maxStars} disabled={disabled} />
          );
        }}
        name={name}
      />
      {errorMessage ? <Text style={tw`text-red-500 mt-4`}>{errorMessage}</Text> : null}
    </View>
  );
}