"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    DropdownPicker: ()=>DropdownPicker
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const react_namespaceObject = require("@lingui/react");
const KeyboardArrowDown_namespaceObject = require("@mui/icons-material/KeyboardArrowDown");
var KeyboardArrowDown_default = /*#__PURE__*/ __webpack_require__.n(KeyboardArrowDown_namespaceObject);
const material_namespaceObject = require("@mui/material");
const apollo_core_namespaceObject = require("@uipath/apollo-core");
var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
const external_index_cjs_namespaceObject = require("../../../index.cjs");
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const index_cjs_namespaceObject = require("../../../ap-typography/index.cjs");
const use_scheduled_callback_cjs_namespaceObject = require("../../hooks/use-scheduled-callback.cjs");
const chat_state_provider_cjs_namespaceObject = require("../../providers/chat-state-provider.cjs");
const external_service_index_cjs_namespaceObject = require("../../service/index.cjs");
const external_action_button_cjs_namespaceObject = require("./action-button.cjs");
const external_tooltip_cjs_namespaceObject = require("./tooltip.cjs");
const DropdownPickerContainer = (0, material_namespaceObject.styled)('div')({
    position: 'relative',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    gap: apollo_core_default().Spacing.SpacingMicro
});
const SelectedOptionContainer = (0, material_namespaceObject.styled)('div')(()=>({
        display: 'flex',
        alignItems: 'center',
        color: 'var(--color-foreground-light)',
        gap: apollo_core_default().Spacing.SpacingMicro,
        cursor: 'pointer',
        borderRadius: apollo_core_default().Border.BorderRadiusM,
        padding: apollo_core_default().Spacing.SpacingMicro,
        '&:focus': {
            outline: '2px solid var(--color-focus-indicator)',
            outlineOffset: '2px'
        },
        '& .arrow-icon': {
            transition: 'transform 0.2s ease-in-out',
            transform: 'rotate(0deg)'
        },
        '& .arrow-icon.open': {
            transform: 'rotate(180deg)'
        }
    }));
const StyledMenuItem = (0, material_namespaceObject.styled)(material_namespaceObject.MenuItem)({
    display: 'flex',
    alignItems: 'center',
    gap: apollo_core_default().Spacing.SpacingMicro
});
function DropdownPicker({ options, selectedOption, onSelect, useIcon, ariaLabel, chatServiceInstance, iconVariant = 'outlined' }) {
    const { _ } = (0, react_namespaceObject.useLingui)();
    const { spacing, theming, portalContainer } = (0, chat_state_provider_cjs_namespaceObject.useChatState)();
    const [anchorEl, setAnchorEl] = external_react_default().useState(null);
    const popoverActionRef = external_react_default().useRef(null);
    const open = Boolean(anchorEl);
    const updatePosition = external_react_default().useCallback(()=>{
        if (popoverActionRef.current) popoverActionRef.current.updatePosition();
    }, []);
    const schedulePositionUpdate = (0, use_scheduled_callback_cjs_namespaceObject.useScheduledCallback)(updatePosition);
    const handleTransitionEnter = external_react_default().useCallback(()=>{
        schedulePositionUpdate();
    }, [
        schedulePositionUpdate
    ]);
    const handleTransitionEntered = external_react_default().useCallback(()=>{
        schedulePositionUpdate();
    }, [
        schedulePositionUpdate
    ]);
    const handleClose = external_react_default().useCallback(()=>{
        setAnchorEl(null);
        if (chatServiceInstance) requestAnimationFrame(()=>{
            chatServiceInstance.__internalService__.publish(external_service_index_cjs_namespaceObject.AutopilotChatInternalEvent.SetInputFocused, true);
        });
    }, [
        chatServiceInstance
    ]);
    const handleOptionChange = external_react_default().useCallback((option)=>{
        onSelect(option);
        handleClose();
    }, [
        onSelect,
        handleClose
    ]);
    const handleClick = external_react_default().useCallback((event)=>{
        event.stopPropagation();
        const target = event.currentTarget instanceof HTMLButtonElement ? event.currentTarget.parentElement : event.currentTarget;
        setAnchorEl(target);
    }, []);
    const handleKeyDown = external_react_default().useCallback((event)=>{
        if ('Enter' === event.key || ' ' === event.key) {
            event.preventDefault();
            handleClick(event);
        }
    }, [
        handleClick
    ]);
    const renderSelectedOption = external_react_default().useCallback(()=>{
        if (useIcon) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_action_button_cjs_namespaceObject.AutopilotChatActionButton, {
            iconName: selectedOption.icon ?? '',
            variant: iconVariant,
            onClick: handleClick,
            tooltipPlacement: "top-start",
            tooltip: open ? null : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                children: [
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
                        color: 'var(--color-foreground-inverse)',
                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeM,
                        children: selectedOption.name
                    }),
                    selectedOption.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
                        color: 'var(--color-foreground-inverse)',
                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeXs,
                        children: selectedOption.description
                    })
                ]
            }),
            ariaLabel: _({
                id: 'autopilot-chat.common.model-selector'
            })
        });
        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.AutopilotChatTooltip, {
            placement: "top-start",
            title: !open && selectedOption.description ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
                color: 'var(--color-foreground-inverse)',
                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
                children: selectedOption.description
            }) : null,
            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(SelectedOptionContainer, {
                onClick: handleClick,
                onKeyDown: handleKeyDown,
                tabIndex: 0,
                role: "button",
                "aria-haspopup": "true",
                "aria-expanded": open,
                "aria-label": _({
                    id: 'autopilot-chat.common.mode-selector'
                }),
                children: [
                    selectedOption.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApIcon, {
                        variant: "outlined",
                        name: selectedOption.icon,
                        size: apollo_core_default().Icon.IconXs
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
                        variant: spacing.primaryFontToken,
                        children: selectedOption.name
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(KeyboardArrowDown_default(), {
                        className: `arrow-icon ${open ? 'open' : ''}`,
                        fontSize: "inherit"
                    })
                ]
            })
        });
    }, [
        selectedOption,
        useIcon,
        open,
        handleClick,
        handleKeyDown,
        iconVariant,
        spacing,
        _
    ]);
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
        children: [
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DropdownPickerContainer, {
                children: renderSelectedOption()
            }),
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.Menu, {
                open: open,
                anchorEl: anchorEl,
                onClose: handleClose,
                container: portalContainer,
                anchorOrigin: {
                    vertical: 'top',
                    horizontal: 'left'
                },
                transformOrigin: {
                    vertical: 'bottom',
                    horizontal: 'left'
                },
                MenuListProps: {
                    'aria-label': ariaLabel,
                    dense: true
                },
                action: popoverActionRef,
                TransitionProps: {
                    onEnter: handleTransitionEnter,
                    onEntered: handleTransitionEntered
                },
                children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledMenuItem, {
                        onClick: ()=>handleOptionChange(option),
                        selected: selectedOption.id === option.id,
                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.AutopilotChatTooltip, {
                            placement: theming?.chatMenu?.groupItemTooltipPlacement ?? 'left',
                            title: option.description ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
                                color: 'var(--color-foreground-inverse)',
                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
                                children: option.description
                            }) : null,
                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                style: {
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: apollo_core_default().Spacing.SpacingMicro,
                                    width: '100%'
                                },
                                children: [
                                    option.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ApIcon, {
                                        variant: "outlined",
                                        name: option.icon,
                                        size: apollo_core_default().Icon.IconXs
                                    }),
                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
                                        variant: spacing.primaryFontToken,
                                        children: option.name
                                    })
                                ]
                            })
                        })
                    }, String(option.id)))
            })
        ]
    });
}
exports.DropdownPicker = __webpack_exports__.DropdownPicker;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "DropdownPicker"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
