import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import Icon from '../Icon/Icon.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';
import Typography from '../Typography/Typography.js';
import Tooltip from '../Tooltip/Tooltip.js';
import { Toastify, toast } from '../Toastify/Toastify.js';
import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions.js';

const Search = ({ placeholder = 'Search', onSearch, disabled = false, width = 150, value = '', isExpand = false, onClose, onExpand, showClose = true, helperText = 'Minimum 3 characters required', showToaster = true, minLength = 3, isAISearch = false, isAISearchClicked = false, handleActiveAiSearch, isClear = false, handleIsClear, style = {}, handleFocus, handleBlur, }) => {
    const [searchValue, setSearchValue] = useState(value);
    const inputRef = useRef(null);
    const [isAnimationActive, setIsAnimationActive] = useState(isAISearchClicked);
    useEffect(() => {
        if (isExpand && inputRef.current && showClose) {
            inputRef.current.focus();
        }
        setSearchValue('');
    }, [isExpand]);
    const handleInputInteraction = () => {
        setIsAnimationActive(false);
    };
    useEffect(() => {
        setSearchValue(value);
        if (!isAISearchClicked || value) {
            setIsAnimationActive(false);
        }
        else if (isAISearchClicked) {
            setIsAnimationActive(true);
        }
    }, [value, isAISearchClicked]);
    const handleSearchData = (key) => {
        if (key === 'Enter') {
            if (searchValue.trim().length < minLength && showToaster) {
                toast.info(helperText);
            }
            else if (!checkEmpty(searchValue.trim())) {
                onSearch(searchValue.trim());
            }
        }
        else if (key === 'Escape') {
            handleSearchClearAndClose('Close');
        }
    };
    useKeyboardActions([
        {
            key: 'Enter',
            action: () => handleSearchData('Enter'),
        },
        {
            key: 'Escape',
            action: () => handleSearchData('Escape'),
        },
    ], inputRef);
    const handleSearchClearAndClose = (label) => {
        setSearchValue('');
        if (label === 'Clear' && isClear) {
            if (isAISearchClicked) {
                setIsAnimationActive(true);
            }
            handleIsClear?.();
        }
        else {
            onSearch('');
        }
        if (label === 'Close') {
            onClose?.();
        }
        if (label === 'Clear' && isExpand && inputRef.current && showClose) {
            inputRef.current.focus();
        }
    };
    const handleIconClick = () => {
        if (!disabled && !isExpand) {
            onExpand?.(true);
        }
    };
    const handleChange = (data) => {
        setSearchValue(data);
        if (showClose) {
            if (data === '') {
                onSearch('');
            }
        }
        else {
            onSearch(data);
        }
    };
    useEffect(() => {
        const handleKeyDown = (e) => {
            if (e.key === 'Enter' &&
                isExpand &&
                inputRef.current === document.activeElement) {
                if (searchValue.trim().length < minLength && showToaster) {
                    toast.info(helperText);
                }
                else if (!checkEmpty(searchValue.trim())) {
                    onSearch(searchValue.trim());
                }
            }
        };
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [
        isExpand,
        onClose,
        searchValue,
        minLength,
        showToaster,
        helperText,
        onSearch,
    ]);
    return (jsx("div", { className: classNames('ff-gradient-border-container', {
            'ai-search-active': isAISearchClicked && isExpand,
        }), children: jsxs("div", { style: style, className: classNames('ff-search-container', {
                expanded: isExpand,
                disabled: disabled,
            }), children: [jsx("div", { className: classNames('ff-search-icon', { expanded: isExpand }), onClick: handleIconClick, children: jsx(Tooltip, { title: disabled ? 'Search Disabled' : 'Search', disabled: isExpand, children: jsx(Icon, { name: "search", height: isExpand ? 14 : 16, width: isExpand ? 14 : 16, disabled: disabled, hoverEffect: !isExpand }) }) }), jsx("div", { className: classNames('ff-vertical-line', {
                        expanded: isExpand,
                    }) }), jsxs("div", { className: classNames('ff-search-input-block', {
                        expanded: isExpand,
                    }), style: { width: isExpand ? `${width}px` : '0px' }, children: [' ', jsx("input", { className: classNames('ff-search-input', {
                                'ai-search-placeholder-animation': isAnimationActive,
                                expanded: isExpand,
                            }), name: "input", style: {
                                width: isExpand
                                    ? width <= 135
                                        ? `${width - 8}px`
                                        : `${width}px`
                                    : '0px',
                            }, placeholder: placeholder, type: "text", value: searchValue, disabled: disabled, ref: inputRef, autoComplete: "off", onChange: (e) => {
                                handleChange(e.target.value);
                                handleInputInteraction();
                            }, onFocus: handleFocus, onBlur: handleBlur })] }), jsx(Toastify, {}), isExpand && (jsxs(Fragment, { children: [jsx("div", { className: classNames('ff-search-clear-button', {
                                showClose: !showClose,
                            }), onClick: () => handleSearchClearAndClose('Clear'), style: searchValue ? { cursor: 'pointer' } : {}, children: searchValue !== '' && (jsx(Typography, { children: 'Clear', fontSize: 8, color: 'var(--ff-search-filed-clear-text)' })) }), jsx(Tooltip, { title: "Close", children: jsx("div", { className: classNames('ff-search-close-icon', {
                                    showClose: !showClose,
                                }), children: jsx(Icon, { name: "close", hoverEffect: true, onClick: () => {
                                        handleSearchClearAndClose('Close');
                                    }, height: 12, width: 12 }) }) }), isAISearch && (jsxs(Fragment, { children: [jsx("div", { className: classNames('ff-vertical-line', {
                                        expanded: isExpand,
                                    }) }), jsx(Icon, { className: classNames('ff-ai-search-icon'), height: 16, width: 16, color: isAISearchClicked ? '' : 'var(--ai-search-icon-color)', name: isAISearchClicked
                                        ? 'ai_search_active_icon'
                                        : 'ai_search_default_icon', onClick: handleActiveAiSearch })] }))] }))] }) }));
};

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