import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef } from 'react';
import './EditTextField.scss';
import Typography from '../Typography';
import HighlightText from '../HighlightText';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import { capitalize } from '../../utils/capitalize/capitalize';
import Input from '../Input/Input';
import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
const getErrorMessage = (inputValue, text, customError, customErrorCondition) => {
    if (inputValue === text) {
        return 'No changes were made.';
    }
    if (!inputValue) {
        return 'Text is required';
    }
    if (inputValue.length < 3) {
        return 'Please enter at least 3 characters.';
    }
    if (customErrorCondition) {
        return customError ?? '';
    }
    return '';
};
const EditTextField = ({ label, text, highlightText, customError, customErrorCondition = false, confirmIcon, cancelIcon, editIcon, dropdownData = [], 
// width = '',
// height = '',
isOpen = false, confirmAction, onClick, nameTooltipTitle, }) => {
    const [isEditing, setIsEditing] = useState(isOpen ?? false);
    const [inputValue, setInputValue] = useState(text);
    const [disabled, isDisabled] = useState(true);
    const [dropdownValue, setDropdownValue] = useState(dropdownData[0]?.value ?? '');
    const [showError, setShowError] = useState('');
    const [isTextFieldModified, setIsTextFieldModified] = useState(false);
    const isThrowingError = showError && isEditing ? true : false;
    const containerRef = useRef(null);
    const cancelRef = useRef(null);
    const handleEditButtonClick = () => {
        setIsEditing(true);
        setShowError('');
    };
    const handleConfirm = () => {
        const errorMessage = getErrorMessage(inputValue, text, customError, customErrorCondition);
        if (errorMessage && isEditing) {
            setShowError(errorMessage);
        }
        else {
            setIsEditing(false);
            setShowError('');
            if (confirmAction)
                confirmAction(inputValue, dropdownValue);
        }
    };
    const handleCancel = () => {
        setInputValue(text);
        setDropdownValue(dropdownData[0]?.value ?? '');
        setIsEditing(false);
        setShowError('');
        setIsTextFieldModified(false);
    };
    const handleTextFieldChange = (e) => {
        setInputValue(e.target.value);
        setIsTextFieldModified(true);
        setShowError('');
        isDisabled(false);
    };
    function handleKeyBoard(key) {
        if (key === 'Enter') {
            handleConfirm();
        }
        if (key === 'Escape') {
            handleCancel();
        }
    }
    useKeyboardActions([
        { key: 'Enter', action: () => handleKeyBoard('Enter') },
        { key: 'Escape', action: () => handleKeyBoard('Escape') },
    ], containerRef);
    return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: "Enter your name", value: inputValue, onChange: handleTextFieldChange, className: `
                
               ${isTextFieldModified ? 'modified' : ''}`, type: "text" }) }), _jsxs("div", { className: "ff-icon-container", children: [confirmIcon && (_jsx(Tooltip, { title: "confirm", placement: 'bottom', children: _jsx(Icon, { color: confirmIcon?.color ?? 'var(--default-confirm-icon-color)', height: confirmIcon?.height ?? 20, disabled: disabled, width: confirmIcon?.width ?? 20, name: confirmIcon?.name ?? 'default-confirm-icon', className: `${confirmIcon?.className ?? 'default-confirm-class'} ${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`, onClick: handleConfirm }) })), cancelIcon && (_jsx(Tooltip, { title: "cancel", placement: 'bottom', children: _jsx(Icon, { color: cancelIcon?.color ?? 'var(--label-edit-cancel-icon)', height: cancelIcon?.height ?? 12, width: cancelIcon?.width ?? 20, name: cancelIcon?.name ?? 'default-cancel-icon', className: cancelIcon?.className ?? 'cancel-icon', onClick: handleCancel, ref: cancelRef }) }))] })] })) : (_jsxs("div", { className: "display-text-container", children: [nameTooltipTitle ? (_jsx(Tooltip, { title: nameTooltipTitle, children: _jsx("span", { className: "display-text", onClick: onClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) }) })) : (_jsx("span", { className: "display-text", onClick: onClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) })), _jsx(Tooltip, { title: capitalize(editIcon?.name ?? 'Edit'), children: _jsx(Icon, { color: editIcon?.color ?? 'var(--label-edit-cancel-icon)', height: editIcon?.height ?? 20, width: editIcon?.width ?? 20, name: editIcon?.name ?? 'edit', className: editIcon?.className ?? 'edit-icon', onClick: handleEditButtonClick }) })] })), showError && isEditing && (_jsx(Typography, { as: "p", fontSize: 8, className: "error-text", children: showError }))] }));
};
export default EditTextField;
//# sourceMappingURL=EditTextField.js.map