import { jsx, jsxs } from "react/jsx-runtime";
import { useLingui } from "@lingui/react";
import { styled } from "@mui/material/styles";
import { NodeViewWrapper } from "@tiptap/react";
import apollo_core, { Typography } from "@uipath/apollo-core";
import react from "react";
import { useChatState } from "../../../providers/chat-state-provider.js";
import { CHAT_RESOURCE_CHIP_MAX_WIDTH } from "../../../service/index.js";
import { fontByVariant } from "../../../utils/font-by-variant.js";
import { AutopilotChatActionButton } from "../../common/action-button.js";
import { AutopilotChatTooltip } from "../../common/tooltip.js";
const ChipContent = styled('span')(({ readonly })=>({
        display: 'inline-flex',
        alignItems: 'center',
        padding: `0 ${apollo_core.Padding.PadS}`,
        backgroundColor: 'var(--color-primary-lighter)',
        color: 'var(--color-foreground)',
        borderRadius: `calc(${apollo_core.Border.BorderRadiusL} * 2)`,
        verticalAlign: 'middle',
        ...!readonly && {
            cursor: 'default'
        },
        maxWidth: CHAT_RESOURCE_CHIP_MAX_WIDTH,
        position: 'relative'
    }));
const ChipIcon = styled('span')(()=>({
        fontFamily: '"Material Icons Outlined"',
        fontSize: apollo_core.Icon.IconXs,
        flexShrink: 0,
        userSelect: 'none'
    }));
const ChipLabel = styled('span')(()=>({
        fontWeight: apollo_core.FontFamily.FontWeightSemibold,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        padding: `0 ${apollo_core.Padding.PadS}`
    }));
const ChipDeleteContainer = styled('span')(({ visible, compactMode })=>({
        opacity: visible ? 1 : 0,
        position: 'absolute',
        right: apollo_core.Spacing.SpacingMicro,
        top: '50%',
        transform: 'translateY(-50%)',
        display: 'flex',
        alignItems: 'center',
        backgroundColor: 'var(--color-primary-lighter)',
        borderRadius: `calc(${apollo_core.Border.BorderRadiusL} * 2)`,
        transition: 'opacity 0.15s ease-in-out',
        '& .MuiButtonBase-root.MuiButtonBase-root': {
            height: compactMode ? apollo_core.Spacing.SpacingS : apollo_core.Spacing.SpacingM,
            width: compactMode ? apollo_core.Spacing.SpacingS : apollo_core.Spacing.SpacingM,
            padding: 0,
            minWidth: 'unset',
            borderRadius: `calc(${apollo_core.Border.BorderRadiusL} * 2)`
        }
    }));
const ResourceChipBaseInner = ({ label, icon, readonly = false, onDelete })=>{
    const { _ } = useLingui();
    const { spacing } = useChatState();
    const [isHovered, setIsHovered] = react.useState(false);
    const [isFocused, setIsFocused] = react.useState(false);
    const handleDelete = react.useCallback((e)=>{
        e.preventDefault();
        e.stopPropagation();
        onDelete?.();
    }, [
        onDelete
    ]);
    const handleMouseEnter = react.useCallback(()=>setIsHovered(true), []);
    const handleMouseLeave = react.useCallback(()=>setIsHovered(false), []);
    const handleFocus = react.useCallback(()=>setIsFocused(true), []);
    const handleBlur = react.useCallback(()=>setIsFocused(false), []);
    return /*#__PURE__*/ jsxs(ChipContent, {
        readonly: readonly,
        ...!readonly && {
            onMouseEnter: handleMouseEnter,
            onMouseLeave: handleMouseLeave
        },
        children: [
            icon && /*#__PURE__*/ jsx(ChipIcon, {
                "aria-hidden": true,
                children: icon
            }),
            /*#__PURE__*/ jsx(AutopilotChatTooltip, {
                title: label,
                placement: "top",
                disableInteractive: true,
                children: /*#__PURE__*/ jsx(ChipLabel, {
                    children: label
                })
            }),
            onDelete && /*#__PURE__*/ jsx(ChipDeleteContainer, {
                visible: isHovered || isFocused,
                compactMode: spacing.compactMode,
                children: /*#__PURE__*/ jsx(AutopilotChatActionButton, {
                    iconSize: spacing.compactMode ? apollo_core.Icon.IconXxs : apollo_core.Icon.IconXs,
                    iconName: "close",
                    tooltip: _({
                        id: 'autopilot-chat.common.attachments.remove-file'
                    }),
                    ariaLabel: _({
                        id: 'autopilot-chat.common.attachments.remove-file-name',
                        values: {
                            label: label
                        }
                    }),
                    onClick: handleDelete,
                    onFocus: handleFocus,
                    onBlur: handleBlur,
                    "data-testid": "resource-chip-delete"
                })
            })
        ]
    });
};
const ResourceChipBase = /*#__PURE__*/ react.memo(ResourceChipBaseInner);
ResourceChipBase.displayName = 'ResourceChipBase';
const ResourceChipNodeView = /*#__PURE__*/ react.memo(({ node, deleteNode })=>{
    const { label, icon } = node.attrs;
    const { spacing } = useChatState();
    const lineHeight = fontByVariant(spacing.primaryFontToken)?.lineHeight ?? Typography.fontSizeM.lineHeight;
    return /*#__PURE__*/ jsx(NodeViewWrapper, {
        as: "span",
        style: {
            display: 'inline-flex',
            alignItems: 'center',
            height: lineHeight,
            lineHeight,
            verticalAlign: 'top',
            marginTop: apollo_core.Padding.PadXs
        },
        children: /*#__PURE__*/ jsx(ResourceChipBase, {
            label: label,
            icon: icon,
            onDelete: deleteNode
        })
    });
});
ResourceChipNodeView.displayName = 'ResourceChipNodeView';
export { ResourceChipBase, ResourceChipNodeView };
