import { Autocomplete, TextField, TextFieldProps } from '@mui/material';
import { useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';

interface IProps {
    options: any[];
    name: string;
    label?: string;
}

export default function RHFAutocomplete({ name, options, label, ...other }: IProps & TextFieldProps) {
    const { control } = useFormContext();
    console.log(control)
    
    const [value, setValue] = useState<string | null>(options[0]);
    const [inputValue, setInputValue] = useState('');

    return (
        <Controller
            name={name}
            control={control}
            render={({ field, fieldState: { error } }) => (
                <Autocomplete
                    {...field}
                    options={options}
                    value={value}
                    onChange={(event: any, newValue: string | null) => {
                        // console.log('fuck', newValue)
                        setValue(newValue.id);
                    }}
                    inputValue={inputValue}
                    onInputChange={(event, newInputValue) => {
                        setInputValue(newInputValue);
                    }}
                    renderInput={(params) => <TextField {...params} label={label ?? name} />}
                    {...other}
                    />
            )}
        />
    );
}