import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Typography from "@mui/material/Typography";
import { Colors } from "@uipath/apollo-core";
import { useSafeLingui } from "../../../../i18n/index.js";
import { ModelTagChip } from "../ModelTagChip.js";
import { deriveModelTags } from "../utils.js";
const PickerTrigger = ({ id, selected, unknownValue, placeholder = 'Select a model', disabled, open, invalid, tagContext, tagVariants, extra, onClick, triggerRef, hideTagKinds, controlsId, describedById, required, className, 'data-testid': dataTestId })=>{
    const { _ } = useSafeLingui();
    const effectiveCtx = tagContext ?? {
        i18n: {
            _
        }
    };
    const inlineTags = selected ? deriveModelTags(selected, effectiveCtx).filter((t)=>!hideTagKinds?.includes(t.kind)) : [];
    const primary = selected ? selected.displayName ?? selected.modelName : null;
    return /*#__PURE__*/ jsx(Box, {
        sx: {
            display: 'flex',
            flexDirection: 'column',
            width: '100%'
        },
        children: /*#__PURE__*/ jsxs(ButtonBase, {
            id: id,
            ref: triggerRef,
            type: "button",
            disabled: disabled,
            onClick: onClick,
            className: className,
            "data-testid": dataTestId,
            "aria-haspopup": "listbox",
            "aria-expanded": open,
            "aria-controls": open && controlsId ? controlsId : void 0,
            "aria-invalid": invalid ? true : void 0,
            "aria-required": required ? true : void 0,
            "aria-describedby": describedById,
            focusRipple: true,
            sx: {
                width: '100%',
                minHeight: 44,
                px: 1.5,
                py: 1,
                display: 'flex',
                alignItems: 'center',
                gap: 1.25,
                justifyContent: 'flex-start',
                textAlign: 'left',
                backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`,
                borderRadius: '9px',
                border: `1.5px solid ${invalid ? `var(--color-error-text, ${Colors.ColorRed700})` : `var(--color-primary, ${Colors.ColorBlue500})`}`,
                boxShadow: open ? "0 0 0 3px var(--color-primary-focused, rgba(0, 103, 223, 0.15))" : 'none',
                transition: 'border-color 120ms, box-shadow 120ms',
                color: `var(--color-foreground, ${Colors.ColorGray850})`,
                '&:hover': {
                    borderColor: invalid ? `var(--color-error-text, ${Colors.ColorRed700})` : `var(--color-primary-hover, ${Colors.ColorBlue600})`
                },
                '&.Mui-disabled': {
                    opacity: 0.5
                }
            },
            children: [
                /*#__PURE__*/ jsx(Box, {
                    sx: {
                        flex: 1,
                        minWidth: 0,
                        display: 'flex',
                        alignItems: 'center',
                        gap: 0.75,
                        flexWrap: 'nowrap'
                    },
                    children: selected ? /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            /*#__PURE__*/ jsx(Typography, {
                                variant: "body1",
                                sx: {
                                    fontWeight: 600,
                                    fontSize: 14,
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    maxWidth: '100%',
                                    color: `var(--color-foreground, ${Colors.ColorGray850})`
                                },
                                children: primary
                            }),
                            inlineTags.map((t)=>/*#__PURE__*/ jsx(Box, {
                                    sx: {
                                        flexShrink: 0
                                    },
                                    children: /*#__PURE__*/ jsx(ModelTagChip, {
                                        tag: t,
                                        variants: tagVariants
                                    })
                                }, `${t.kind}-${t.label}`))
                        ]
                    }) : unknownValue ? /*#__PURE__*/ jsx(Typography, {
                        variant: "body1",
                        sx: {
                            fontWeight: 600,
                            fontSize: 14,
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            maxWidth: '100%',
                            color: `var(--color-error-text, ${Colors.ColorRed700})`
                        },
                        title: _({
                            id: 'modelPicker.trigger.unknownValueTooltip',
                            message: '"{value}" is no longer available in this catalog. Pick a replacement to ensure your workflow continues to run.',
                            values: {
                                value: unknownValue
                            }
                        }),
                        children: unknownValue
                    }) : /*#__PURE__*/ jsx(Typography, {
                        variant: "body1",
                        sx: {
                            color: `var(--color-foreground-disable, ${Colors.ColorGray500})`,
                            fontSize: 14
                        },
                        children: placeholder
                    })
                }),
                extra && /*#__PURE__*/ jsx(Box, {
                    sx: {
                        flexShrink: 0,
                        display: 'flex',
                        alignItems: 'center'
                    },
                    onClick: (e)=>e.stopPropagation(),
                    children: extra
                }),
                /*#__PURE__*/ jsx(KeyboardArrowDown, {
                    sx: {
                        color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                        transition: 'transform 150ms',
                        transform: open ? 'rotate(180deg)' : 'rotate(0)',
                        flexShrink: 0,
                        fontSize: 18
                    }
                })
            ]
        })
    });
};
export { PickerTrigger };
