import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { Button, useTheme } from '@mui/material';
import { IconVariablePlus } from '@tabler/icons-react';
import { useTextArea } from '../../context';
import InsertVariableMenu from './menu';
const InsertVariable = ({ title, variables }) => {
    const { editor } = useTextArea();
    const theme = useTheme();
    const anchorRef = useRef(null);
    const [open, setOpen] = useState(false);
    if (!editor)
        return null;
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    const handleSelect = (token, label) => {
        handleClose();
        editor
            .chain()
            .focus()
            .insertContent({
            type: 'variablePill',
            attrs: { token, label },
        })
            .run();
    };
    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: anchorRef, variant: "outlined", size: "small", startIcon: _jsx(IconVariablePlus, { size: 16 }), onClick: handleOpen, sx: {
                    textTransform: 'none',
                    borderColor: theme.palette.new.border.neutral.brand,
                    color: theme.palette.new.text.neutral.brand,
                    typography: 'caption',
                    fontWeight: 'fontWeightSemiBold',
                    px: 1.5,
                    py: 0.5,
                    borderRadius: theme.shape.borderRadiusM,
                    whiteSpace: 'nowrap',
                    '&:hover': {
                        borderColor: theme.palette.new.border.neutral.brand,
                        backgroundColor: theme.palette.new.action.background.brand.default,
                    },
                }, children: title }), _jsx(InsertVariableMenu, { anchorRef: anchorRef, open: open, onClose: handleClose, onSelect: handleSelect, variables: variables })] }));
};
export default InsertVariable;
