import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { CreateNewModal } from './create-new-modal';
import { EntityPickerStyled, FooterStyled, SelectCSS, ButtonCSS, } from './entity-picker.style';
export const EntityMultiselect = ({ placeholder, options, onAdd, onCreate, type, size = 'middle', className, }) => {
    const { t } = useTranslation();
    const [value, setValue] = useState();
    const [open, setOpen] = useState(false);
    const handleChange = useCallback((selectedValue) => {
        setValue(selectedValue);
    }, []);
    const handleAdd = useCallback(() => {
        if (!value) {
            return;
        }
        onAdd(value);
        setValue(undefined);
    }, [value, onAdd]);
    const handleCancel = useCallback(() => setOpen(false), []);
    const handleOpen = useCallback(() => setOpen(true), []);
    return (_jsxs(_Fragment, { children: [_jsxs(EntityPickerStyled, { className: className, children: [_jsx(Select, { css: SelectCSS, size: size, options: options, onChange: handleChange, value: value, placeholder: placeholder, open: open ? false : undefined, showSearch: true, dropdownRender: (menu) => (_jsxs(_Fragment, { children: [_jsx("div", { children: menu }), _jsx(FooterStyled, { children: _jsx(Button, { block: true, size: "small", onClick: handleOpen, children: t('inspector.entityPicker.createNew.button.title') }) })] })) }), _jsx(Button, { css: ButtonCSS, size: size, icon: _jsx(PlusOutlined, {}), onClick: handleAdd })] }), open && (_jsx(CreateNewModal, { type: type, open: open, onClose: handleCancel, onCreate: onCreate }))] }));
};
