import CheckIcon from '../../../../../node_modules/@mui/icons-material/esm/CheckRounded.mjs';
import CloseIcon from '../../../../../node_modules/@mui/icons-material/esm/Close.mjs';
import ExpandMore from '../../../../../node_modules/@mui/icons-material/esm/ExpandMore.mjs';
import React__default, { useState } from 'react';
import { useUniqueId } from '../../utils/uniqueId.mjs';
import { SelectContainer } from '../shared/components/Select.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Label } from './Label.mjs';
import { Tag } from './Tag.mjs';
import Typography from '../../../../../node_modules/@mui/material/Typography/Typography.mjs';
import styled from '../../../../../node_modules/@mui/material/styles/styled.mjs';
import Autocomplete$1 from '../../../../../node_modules/@mui/material/Autocomplete/Autocomplete.mjs';
import autocompleteClasses from '../../../../../node_modules/@mui/material/Autocomplete/autocompleteClasses.mjs';
import outlinedInputClasses from '../../../../../node_modules/@mui/material/OutlinedInput/outlinedInputClasses.mjs';
import inputBaseClasses from '../../../../../node_modules/@mui/material/InputBase/inputBaseClasses.mjs';
import TextField from '../../../../../node_modules/@mui/material/TextField/TextField.mjs';
import IconButton from '../../../../../node_modules/@mui/material/IconButton/IconButton.mjs';

const StyledAutocomplete = styled(Autocomplete$1)(({ theme })=>({
        [`& .${inputBaseClasses.root}`]: {
            padding: theme.spacing(1),
            gap: theme.spacing(0.5),
            color: theme.styleConfig.inputs.textColor
        },
        [`& .${outlinedInputClasses.input}.${autocompleteClasses.input}`]: {
            padding: 0,
            height: 24,
            '&::placeholder': {
                color: theme.styleConfig.inputs.placeholderColor,
                opacity: 1
            },
            '&:hover': {
                borderColor: theme.styleConfig.inputs.textColor
            }
        },
        [`& .${outlinedInputClasses.notchedOutline}`]: {
            border: '1px solid',
            borderRadius: theme.styleConfig.inputs.borderRadius,
            borderColor: theme.styleConfig.inputs.borderColor
        },
        [`&:hover .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}, .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
            borderWidth: 1,
            borderColor: theme.styleConfig.inputs.textColor
        },
        [`& .${autocompleteClasses.tag}`]: {
            margin: 0
        }
    }));
const StyledIconButton$1 = styled(IconButton)({
    padding: '3px'
});
const AutocompleteTag = ({ children, onDelete, ...props })=>{
    return /*#__PURE__*/ React__default.createElement(Tag, {
        ...props,
        size: "small",
        hasTopAndBottomPadding: false
    }, /*#__PURE__*/ React__default.createElement(FlexBox, {
        gap: 0.5,
        alignItems: "center"
    }, children, onDelete && /*#__PURE__*/ React__default.createElement(StyledIconButton$1, {
        size: "small",
        onClick: onDelete
    }, /*#__PURE__*/ React__default.createElement(CloseIcon, {
        fontSize: "small"
    }))));
};
const Input$1 = (props)=>{
    return /*#__PURE__*/ React__default.createElement(TextField, {
        ...props,
        variant: "outlined"
    });
};
const defaultGetOptionLabel = (item)=>item;
const Autocomplete = ({ caption, fullWidth, getOptionDescription, getOptionDisabled, getOptionLabel = defaultGetOptionLabel, id, label, onChange, placeholder, required, selectItems, value })=>{
    const selectId = useUniqueId(id);
    const [isOpen, setIsOpen] = useState(false);
    return /*#__PURE__*/ React__default.createElement(SelectContainer, {
        fullWidth: fullWidth
    }, label && /*#__PURE__*/ React__default.createElement(Label, {
        htmlFor: selectId,
        required: required,
        variant: "caption",
        labelColor: "secondary"
    }, label), /*#__PURE__*/ React__default.createElement(StyledAutocomplete, {
        popupIcon: /*#__PURE__*/ React__default.createElement(ExpandMore, null),
        fullWidth: true,
        id: selectId,
        multiple: true,
        onChange: (_, newValue, reason)=>{
            if (onChange) {
                if (reason === 'clear' && getOptionDisabled) {
                    // Retain any selected values that are also disabled (i.e., should
                    // not be clearable)
                    onChange(value.filter((item)=>getOptionDisabled(item)));
                } else {
                    onChange(newValue);
                }
            }
        },
        onClose: ()=>setIsOpen(false),
        onOpen: ()=>setIsOpen(true),
        open: isOpen,
        value: value,
        options: selectItems,
        getOptionDisabled: getOptionDisabled,
        getOptionLabel: getOptionLabel,
        renderOption: (props, option, state)=>{
            const description = getOptionDescription?.(option);
            return /*#__PURE__*/ React__default.createElement("li", props, /*#__PURE__*/ React__default.createElement(FlexBox, {
                gap: 0.5,
                alignItems: "center"
            }, /*#__PURE__*/ React__default.createElement(CheckIcon, {
                fontSize: "small",
                style: {
                    visibility: state.selected ? 'visible' : 'hidden'
                },
                "aria-hidden": !state.selected
            }), /*#__PURE__*/ React__default.createElement("div", null, getOptionLabel(option), description && /*#__PURE__*/ React__default.createElement(Typography, {
                variant: "body2"
            }, description))));
        },
        renderInput: (params)=>/*#__PURE__*/ React__default.createElement(Input$1, {
                ...params,
                placeholder: placeholder
            }),
        renderTags: (value, getTagProps)=>value.map((option, index)=>{
                const { onDelete, ...tagProps } = getTagProps({
                    index
                });
                return(// key is in tagProps
                // eslint-disable-next-line react/jsx-key
                /*#__PURE__*/ React__default.createElement(AutocompleteTag, {
                    ...tagProps,
                    onDelete: getOptionDisabled?.(option) ? undefined : onDelete
                }, getOptionLabel(option)));
            })
    }), caption && /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body2"
    }, caption));
};

export { Autocomplete };
//# sourceMappingURL=Autocomplete.mjs.map
