import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTranslation } from 'react-i18next';
import { Box, FormControl, Stack, useTheme } from '@mui/material';
import { EditorContent } from '@tiptap/react';
import CustomHelperText from '../Base/CustomHelperText';
import CustomLabel from '../Base/CustomLabel';
import { getBorderColor } from '../utils';
import InsertVariable from './actions/InsertVariable';
import ActionsBar from './components/ActionsBar';
import { TextAreaReadOnlyView } from './components/TextAreaReadOnlyView';
import { getEditorStyles } from './constants';
import { TextAreaProvider, useTextArea } from './context';
const TextAreaWrapper = ({ label, success, error, errorText, helperText, sx, simplifyEditor, actions, visibleActions, }) => {
    const { editor, slotProps } = useTextArea();
    const theme = useTheme();
    const { t } = useTranslation('material_hu_only');
    const disabled = !editor?.isEditable;
    return (_jsxs(FormControl, { sx: {
            width: '100%',
            ...sx,
        }, error: error, disabled: disabled, children: [_jsx(CustomLabel, { label: label, success: success }), _jsxs(Stack, { sx: {
                    containerType: 'inline-size',
                    position: 'relative',
                    ...getEditorStyles(theme),
                    border: '1px solid',
                    borderRadius: 2,
                    borderColor: getBorderColor(theme, editor?.isFocused, error, success, !editor?.isEmpty),
                    backgroundColor: theme.palette.new.background.elements.default,
                    transition: 'border 125ms ease-in-out',
                }, children: [!disabled && (_jsx(ActionsBar, { simplifyEditor: simplifyEditor, actions: actions, visibleActions: visibleActions })), editor && (_jsx(EditorContent, { editor: editor, style: actions?.insertVariable
                            ? { paddingBottom: theme.spacing(5) }
                            : undefined })), !disabled && actions?.insertVariable && (_jsx(Box, { sx: {
                            position: 'absolute',
                            bottom: theme.spacing(1),
                            right: theme.spacing(1),
                            zIndex: 2,
                        }, children: _jsx(InsertVariable, { title: t('top_bar_rich_text_editor.insert_variable'), variables: slotProps?.insertVariable?.variables ?? [] }) }))] }), _jsx(CustomHelperText, { value: editor?.getText() || '', helperText: error ? errorText : helperText, success: success })] }));
};
const TextArea = ({ actions, simplifyEditor, visibleActions, content, disabled, readOnly, error, errorText, handlePaste, helperText, handleDrop, label, onChange, onBlur, onFocus, placeholder, slotProps, success, sx, immediatelyRender = true, characterLimit, }) => {
    return (_jsx(TextAreaProvider, { onChange: onChange, onBlur: onBlur, onFocus: onFocus, content: content, slotProps: slotProps, handlePaste: handlePaste, handleDrop: handleDrop, placeholder: placeholder, disabled: disabled, readOnly: readOnly, immediatelyRender: immediatelyRender, variablesEnabled: !!actions?.insertVariable, characterLimit: characterLimit, children: readOnly ? (_jsx(TextAreaReadOnlyView, { sx: sx })) : (_jsx(TextAreaWrapper, { error: error, errorText: errorText, helperText: helperText, label: label, success: success, sx: sx, simplifyEditor: simplifyEditor, actions: actions, visibleActions: visibleActions })) }));
};
export { buildTokenLabelMap, normalizeVariables, prepareForBackend, prepareForEditor, } from './utils/variableSerialization';
export default TextArea;
