import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import Drawer from '../Drawer/Drawer.js';
import Input from '../Input/Input.js';
import Select from '../Select/Select.js';
import Checkbox from '../Checkbox/Checkbox.js';
import Icon from '../Icon/Icon.js';
import Button from '../Button/Button.js';
import Tooltip from '../Tooltip/Tooltip.js';
import { ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, START_END_WHITESPACE_REGEX } from '../../validations/regex.js';
import VariableSuggestionInputDropDown from '../variableSuggestionInputDropDown/VariableSuggestionInputDropDown.js';

const CreateVariableSlider = ({ isOpen, variableTypesList = [], onClose, onNameChange, onValueChange, variableName, variableValue, onVariableTypeChange, selectedVariableType, hideValue = false, onHideChange, handleSubmit, mode = 'create', disabled, dataFiles = [], truncateTextValue = 34, isEnterKeySubmit = false, showHideValueOption = true, }) => {
    const [error, setError] = useState(false);
    const [helperText, setHelperText] = useState('');
    const [hashInputValue, setHashInputValue] = useState();
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [hasChanges, setHasChanges] = useState(false);
    const [initialValues, setInitialValues] = useState({
        name: '',
        value: '',
        isChecked: false,
    });
    useEffect(() => {
        if (isOpen && mode === 'edit') {
            setInitialValues({
                name: variableName,
                value: variableValue,
                isChecked: hideValue,
            });
        }
    }, []);
    const getVariableNameError = (value) => {
        if (!value || value.length === 0) {
            return 'Variable Name is required';
        }
        if (value[0] === ' ' || value[value.length - 1] === ' ') {
            return 'Space is not allowed at starting and at the end';
        }
        if (!ALPHANUMERIC_WITH_ROUND_BRACES_REGEX.test(value)) {
            return 'Name should be alphanumeric';
        }
        if (value.length < 3) {
            return 'Name should contain at least 3 characters';
        }
        if (value.length > 25) {
            return 'Name can contain at most 25 characters';
        }
        return '';
    };
    const onBlurHandler = (event) => {
        const value = event.target.value;
        const errorMessage = getVariableNameError(value);
        setError(!!errorMessage);
        setHelperText(errorMessage);
    };
    useEffect(() => {
        const errorMessage = getVariableNameError(variableName);
        setError(!!errorMessage);
        setHelperText(errorMessage);
    }, [variableName]);
    function isVariableNameValid(value) {
        const isNonEmpty = !!value;
        const matchesPattern = ALPHANUMERIC_WITH_ROUND_BRACES_REGEX.test(value);
        const noWhitespaceEdges = START_END_WHITESPACE_REGEX.test(value);
        const lengthValid = value.length >= 3 && value.length <= 25;
        const isValid = isNonEmpty && matchesPattern && noWhitespaceEdges && lengthValid;
        return isValid;
    }
    useEffect(() => {
        if (mode !== 'edit')
            return;
        const { name, value, isChecked } = initialValues;
        setHasChanges(variableName !== name ||
            variableValue !== value ||
            hideValue !== isChecked);
    }, [mode, variableName, variableValue, hideValue, initialValues]);
    const triggerSubmit = () => {
        if (!isSubmitting && isVariableNameValid(variableName)) {
            setIsSubmitting(true);
            handleSubmit();
        }
    };
    useEffect(() => {
        if (!isEnterKeySubmit)
            return;
        const handleKeyDown = (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                const isDisabled = !isVariableNameValid(variableName) ||
                    isSubmitting ||
                    (mode === 'edit' && !hasChanges);
                if (!isDisabled) {
                    triggerSubmit();
                }
            }
        };
        window.addEventListener('keydown', handleKeyDown);
        return () => {
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [
        isEnterKeySubmit,
        variableName,
        variableValue,
        hideValue,
        isSubmitting,
        mode,
        hasChanges,
        selectedVariableType,
    ]);
    const FooterContent = () => {
        return (jsxs("div", { className: "ff-create-slider-footer", children: [jsx(Button, { onClick: onClose, label: "Cancel", variant: "tertiary" }), jsx(Button, { variant: "primary", label: mode === 'create' ? 'Create' : 'Update', type: "submit", onClick: triggerSubmit, disabled: !isVariableNameValid(variableName) ||
                        isSubmitting ||
                        (mode === 'edit' && !hasChanges) })] }));
    };
    return (jsx(Drawer, { zIndex: 1350, onClose: onClose, isOpen: isOpen, title: mode === 'create' ? 'Create Variable' : 'Edit Variable', width: "284px", height: showHideValueOption ? '280px' : '250px', top: "30%", right: 8, isFooterRequired: true, overlay: true, footerContent: jsx(FooterContent, {}), children: jsxs("div", { className: "ff-create-variable-slider", children: [jsx("div", { className: "ff-create-variable-slider-input", children: jsx(Input, { label: "Variable Name", required: true, type: "text", name: "variableName", value: variableName || '', onChange: (event) => {
                            setIsSubmitting(false);
                            onNameChange(event.target.value);
                        }, error: error, helperText: helperText, onBlur: onBlurHandler }) }), jsx(Select, { label: "Variable Type", required: true, onChange: (option) => {
                        onVariableTypeChange(option);
                        setIsSubmitting(false);
                    }, selectedOption: selectedVariableType, optionsList: variableTypesList, optionZIndex: 99999, valueAccessor: "label", disabled: mode === 'edit' }), jsx(VariableSuggestionInputDropDown, { label: "Variable Value", placeholder: "Enter Variable value or select path using #", isHash: true, isOnlyHash: true, zIndex: 99999, truncateTextValue: truncateTextValue, dataFiles: dataFiles, dropdownWidth: "100%", setHashInputValue: setHashInputValue, hashInputValue: hashInputValue || {}, value: variableValue || '', type: hideValue ? 'password' : 'text', onChange: (event, item) => {
                        const value = event.target.value;
                        onValueChange(value, item);
                    }, showAddVariableIcon: false }), showHideValueOption && (jsxs("div", { className: "ff-hide-value-content", children: [jsx(Checkbox, { onChange: (event) => onHideChange(event.target.checked), name: "hideValue", label: "Hide Value", checked: hideValue, disabled: disabled }), jsx(Tooltip, { title: "Once the value is hidden, it cannot be undone", children: jsx(Icon, { name: "info", width: 12, height: 12 }) })] }))] }) }));
};

export { CreateVariableSlider as default };
//# sourceMappingURL=CreateVariableSlider.js.map
