import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Select } from 'antd';
import { CreateNewModal } from './create-new-modal';
import { EntityPickerStyled, FooterStyled, SelectCSS, } from './entity-picker.style';
export const EntitySelect = ({ options, value, onAdd, onCreate, type, className, }) => {
    const { t } = useTranslation();
    const [open, setOpen] = useState(false);
    const availableOptions = useMemo(() => {
        return [
            {
                label: t('inspector.components.select.option.none.title'),
                value: null,
            },
            ...options,
        ];
    }, [options]);
    const handleCancel = useCallback(() => setOpen(false), []);
    const handleOpen = useCallback(() => setOpen(true), []);
    return (_jsxs(_Fragment, { children: [_jsx(EntityPickerStyled, { className: className, children: _jsx(Select, { css: SelectCSS, size: "small", options: availableOptions, onChange: onAdd, value: value, 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') }) })] })) }) }), open && (_jsx(CreateNewModal, { type: type, open: open, onClose: handleCancel, onCreate: onCreate }))] }));
};
