import { Close, ExpandMore } from '@mui/icons-material';
import { Chip, Autocomplete as MuiAutocomplete, AutocompleteProps as MuiAutocompleteProps, TextField, Tooltip } from '@mui/material';
import React from 'react';
import './autocomplete.scss';

export type AutocompleteOption = {
    label: string,
    value: string,
};

export interface AutocompleteProps extends MuiAutocompleteProps<AutocompleteOption, false, true, false> {
    label?: string;
    width?: string;
    height?: string;
    defaultValues?: AutocompleteOption[];
    variant?: 'outlined' | 'standard' | 'filled';
    onOptionChange?: (values: string[]) => void;
}

export const Autocomplete = ({ options, defaultValues, label, width, variant, size, onOptionChange, ...rest }: AutocompleteProps) => {

    const [selectedOptions, setSelectedOptions] = React.useState(defaultValues ? defaultValues as any[] : []);

    const handleSelection = (e: any, selected: any) => {
        const selectedValues = selected?.map((item: any) => {
            if (typeof item === 'object' && item.value) {
                return item.value;
            } else if (typeof item === 'string') {
                const existingOption = options?.find(({label}) => label === item);
                return existingOption?.value || item;
            }
        });
        if (onOptionChange) {
            onOptionChange(selectedValues);
        }
    };

    return (
        <MuiAutocomplete className="auto-complete-container MuiAutocomplete-root" fullWidth
            disableClearable
            multiple
            id="tags-filled"
            options={options}
            freeSolo
            size="small"
            forcePopupIcon={true}
            popupIcon={<ExpandMore className='auto-complete-expand-icon' />}
            onChange={handleSelection}
            defaultValue={selectedOptions}

            renderTags={(options: readonly any[], getTagProps) => (
                    options.map((option: any, index: number) => (
                        <Tooltip key={index} title={option?.label ? option.label : option} arrow>
                            <Chip
                                variant="outlined" label={option?.label ? option.label : option}
                                {...getTagProps({ index })}
                                key={index} className="auto-complete-chip"
                                deleteIcon={<Close className="auto-complete-close-icon"></Close>}
                            />
                        </Tooltip>
                    ))
            )}

            renderInput={(params) => (
                <TextField
                    {...params}
                    variant="outlined"
                    label={label}
                    placeholder=""
                />
            )}

        ></MuiAutocomplete>
    );
}