import { jsx, jsxs } from "react/jsx-runtime";
import EditOutlined from "@mui/icons-material/EditOutlined";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { Colors, FontFamily } from "@uipath/apollo-core";
import react from "react";
import { ModelTagChip } from "../ModelTagChip.js";
import { deriveModelTags } from "../utils.js";
const FULL_OPTION_HEIGHT = 64;
const DENSE_OPTION_HEIGHT = 44;
function formatContextWindow(tokens) {
    if (null == tokens || tokens <= 0) return null;
    if (tokens >= 1000000) {
        const m = tokens / 1000000;
        return `${m % 1 === 0 ? m.toFixed(0) : m.toFixed(1)}M context`;
    }
    if (tokens >= 1000) {
        const k = Math.round(tokens / 1000);
        return `${k}K context`;
    }
    return `${tokens} context`;
}
const ModelOptionRowInner = ({ model, index, active, selected, onSelect, onActivate, tagContext, tagVariants, renderActions, renderMeta, dense, hideTagKinds, id, 'data-testid': dataTestId })=>{
    const inlineTags = deriveModelTags(model, tagContext ?? {}).filter((t)=>!hideTagKinds?.includes(t.kind));
    const primaryLabel = model.displayName ?? null;
    const primary = primaryLabel ?? model.modelName;
    const usesFriendlyName = !!primaryLabel && primaryLabel !== model.modelId;
    const techId = usesFriendlyName ? model.modelId : null;
    const minHeight = dense ? DENSE_OPTION_HEIGHT : FULL_OPTION_HEIGHT;
    const contextLabel = formatContextWindow(model.modelDetails?.contextWindowTokens);
    const rowActions = renderActions ? renderActions(model) : null;
    const meta = renderMeta?.(model);
    return /*#__PURE__*/ jsxs(ButtonBase, {
        component: "div",
        id: id,
        role: "option",
        "aria-selected": selected,
        "data-testid": dataTestId,
        tabIndex: -1,
        onClick: ()=>onSelect(model),
        onMouseEnter: onActivate ? ()=>onActivate(index) : void 0,
        sx: {
            width: '100%',
            minHeight,
            px: dense ? 1.5 : 1.75,
            py: dense ? 0.875 : 1.375,
            display: 'flex',
            alignItems: 'flex-start',
            gap: dense ? 1 : 1.5,
            justifyContent: 'flex-start',
            textAlign: 'left',
            position: 'relative',
            boxShadow: selected ? `inset 3px 0px 0px var(--color-primary, ${Colors.ColorBlue500})` : 'none',
            backgroundColor: selected ? `var(--color-background-selected, ${Colors.ColorBlue050})` : active ? "var(--color-background-hover, rgba(82, 96, 105, 0.078))" : 'transparent',
            '&:hover': {
                backgroundColor: selected ? `var(--color-background-selected, ${Colors.ColorBlue050})` : "var(--color-background-hover, rgba(82, 96, 105, 0.078))"
            }
        },
        children: [
            /*#__PURE__*/ jsxs(Box, {
                sx: {
                    flex: 1,
                    minWidth: 0
                },
                children: [
                    /*#__PURE__*/ jsxs(Box, {
                        sx: {
                            display: 'flex',
                            alignItems: 'center',
                            gap: 0.75,
                            flexWrap: 'nowrap',
                            minWidth: 0
                        },
                        children: [
                            /*#__PURE__*/ jsx(Typography, {
                                variant: "body2",
                                sx: {
                                    fontWeight: 600,
                                    color: `var(--color-foreground, ${Colors.ColorGray850})`,
                                    lineHeight: 1.3,
                                    fontSize: dense ? 13 : 14,
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    flex: '0 1 auto',
                                    minWidth: 0
                                },
                                children: primary
                            }),
                            inlineTags.map((t)=>/*#__PURE__*/ jsx(Box, {
                                    sx: {
                                        flexShrink: 0
                                    },
                                    children: /*#__PURE__*/ jsx(ModelTagChip, {
                                        tag: t,
                                        variants: tagVariants
                                    })
                                }, `${t.kind}-${t.label}`))
                        ]
                    }),
                    techId && /*#__PURE__*/ jsx(Typography, {
                        variant: "caption",
                        sx: {
                            display: 'block',
                            color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                            mt: 0.25,
                            fontFamily: FontFamily.FontMono,
                            fontSize: 11,
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis'
                        },
                        children: techId
                    }),
                    model.byoConnectionLabel && /*#__PURE__*/ jsx(Typography, {
                        variant: "caption",
                        sx: {
                            display: 'block',
                            color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                            mt: techId ? 0 : 0.25,
                            fontSize: 12,
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            maxWidth: '100%'
                        },
                        children: model.byoConnectionLabel
                    })
                ]
            }),
            (contextLabel ?? meta) && /*#__PURE__*/ jsxs(Box, {
                sx: {
                    flexShrink: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'flex-end',
                    gap: 0.5,
                    pt: 0.125
                },
                onClick: (e)=>e.stopPropagation(),
                children: [
                    contextLabel && /*#__PURE__*/ jsx(Typography, {
                        variant: "caption",
                        sx: {
                            color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                            fontSize: 11,
                            lineHeight: 1.2
                        },
                        children: contextLabel
                    }),
                    meta
                ]
            }),
            rowActions && /*#__PURE__*/ jsx(Box, {
                sx: {
                    display: 'flex',
                    alignItems: 'center',
                    gap: 0.25,
                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                    flexShrink: 0,
                    pt: 0.125
                },
                onClick: (e)=>e.stopPropagation(),
                children: rowActions
            })
        ]
    });
};
const ModelOptionRow = /*#__PURE__*/ react.memo(ModelOptionRowInner);
ModelOptionRow.displayName = 'ModelOptionRow';
function defaultRowActions(model, options = {}) {
    const { i18n, onEdit } = options;
    if (!onEdit) return null;
    const isByo = 'BYOMAdded' === model.modelSubscriptionType || 'BYOMReplacedAlternative' === model.modelSubscriptionType || 'BYOMReplacedLikeForLike' === model.modelSubscriptionType;
    if (!isByo) return null;
    const editTitle = i18n ? i18n._({
        id: 'modelPicker.row.editConfiguration',
        message: 'Edit configuration'
    }) : 'Edit configuration';
    return /*#__PURE__*/ jsx(Tooltip, {
        title: editTitle,
        arrow: true,
        children: /*#__PURE__*/ jsx(IconButton, {
            size: "small",
            sx: {
                color: 'inherit'
            },
            "aria-label": editTitle,
            onClick: ()=>onEdit(model),
            children: /*#__PURE__*/ jsx(EditOutlined, {
                fontSize: "small"
            })
        })
    });
}
export { DENSE_OPTION_HEIGHT, FULL_OPTION_HEIGHT, ModelOptionRow, defaultRowActions };
