tsms/src/components/ControlledAutoComplete/ControlledAutoComplete.tsx

"use client"

import { Autocomplete, MenuItem, TextField, Checkbox } from "@mui/material";
import { Controller, FieldValues, Path, Control, RegisterOptions } from "react-hook-form";
import { useTranslation } from "react-i18next";
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';

const icon = <CheckBoxOutlineBlankIcon fontSize="medium" />;
const checkedIcon = <CheckBoxIcon fontSize="medium" />;
// label -> e.g. code - name -> 001 - WL
// name -> WL
interface Props<T extends { id?: number | string; label?: string; name?: string }, TField extends FieldValues> {
    control: Control<TField>,
    options: T[],
    name: Path<TField>, // register name
    label?: string, // display label
    noOptionsText?: string,
    isMultiple?: boolean,
    rules?: RegisterOptions<FieldValues>
    error?: boolean,
}

function ControlledAutoComplete<
    T extends { id?: number | string; label?: string; name?: string },
    TField extends FieldValues
>(
    props: Props<T, TField>
) {
    const { t } = useTranslation()
    const { control, options, name, label, noOptionsText, isMultiple, rules, error } = props;

    return (
        <Controller
            name={name}
            control={control}
            rules={rules}
            render={({ field }) => (
                isMultiple ?
                    <Autocomplete
                        multiple
                        disableClearable
                        disableCloseOnSelect
                        disablePortal
                        noOptionsText={noOptionsText ?? t("No Options")}
                        value={options.filter(option => {
                            // console.log(field.value)
                            return field.value?.includes(option.id)
                        })}
                        options={options}
                        getOptionLabel={(option) => option.label ?? option.name!!}
                        isOptionEqualToValue={(option, value) => option.id === value.id}
                        renderOption={(params, option, { selected }) => {
                            return (
                                <li {...params}>
                                    <Checkbox
                                        icon={icon}
                                        checkedIcon={checkedIcon}
                                        checked={selected}
                                        style={{ marginRight: 8 }}
                                    />
                                    {option.label ?? option.name}
                                </li>
                            );
                        }}
                        onChange={(event, value) => {
                            field.onChange(value?.map(v => v.id))
                        }}
                        renderInput={(params) => <TextField {...params} error={error} variant="outlined" label={label} />}
                    />
                    :
                    <Autocomplete
                        disableClearable
                        disablePortal
                        noOptionsText={noOptionsText ?? t("No Options")}
                        value={options.find(option => option.id === field.value) ?? options[0]}
                        options={options}
                        getOptionLabel={(option) => option.label ?? option.name!!}
                        isOptionEqualToValue={(option, value) => option.id === value.id}
                        renderOption={(params, option) => {
                            return (
                                <MenuItem {...params} key={option.id} value={option.id}>
                                    {option.label ?? option.name}
                                </MenuItem>
                            );
                        }}
                        onChange={(event, value) => {
                            field.onChange(value?.id)
                        }}
                        renderInput={(params) => <TextField {...params} error={error} variant="outlined" label={label} />}
                    />
            )}
        />
    )
}

export default ControlledAutoComplete;