import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import Icon from '../Icon';
import Typography from '../Typography';
import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
import './AllProjectsDropdown.scss';
import classNames from 'classnames';
import Tooltip from '../Tooltip';
import useClickOutside from '../../hooks/useClickOutside';
import Search from '../Search';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, options, selectedOption = {
    label: 'All Projects',
    value: 'All Projects',
    iconName: 'all_projects',
}, selected = false, placeholder, disabled = false, }) => {
    const [showOptions, setShowOptions] = useState(false);
    const [showClicked, setShowClicked] = useState(false);
    const [selectedOptions, setSelectedOptions] = useState(selectedOption);
    const optionsRef = useRef(null);
    const [optionsList, setOptionsList] = useState(options);
    // ⇩⇩⇩ Updated: use actual return type of setTimeout (works in Node & DOM) ⇩⇩⇩
    const [closeTimeout, setCloseTimeout] = useState(null);
    // ⇧⇧⇧ Updated: use actual return type of setTimeout (works in Node & DOM) ⇧⇧⇧
    const containerRef = useRef(null);
    const [searchValue, setSearchValue] = useState('');
    const [isSecondClickFromOtherTab, setIsSecondClickFromOtherTab] = useState(selected);
    useEffect(() => {
        if (optionsList !== options) {
            setOptionsList(options);
        }
    }, [options]);
    useEffect(() => {
        if (!selected) {
            setIsSecondClickFromOtherTab(false);
        }
    }, [selected]);
    useEffect(() => {
        if (selectedOption) {
            setSelectedOptions(selectedOption);
        }
    }, [selectedOption]);
    const closeOptions = () => {
        if (showOptions) {
            setShowOptions(false);
        }
    };
    const handleMouseEnter = () => {
        if (!disabled) {
            setShowOptions(true);
        }
        if (!disabled && !selected) {
            setShowOptions(true);
        }
    };
    const handleClick = () => {
        if (!disabled) {
            if (showOptions) {
                setShowOptions(false);
            }
            if (!isSecondClickFromOtherTab) {
                setIsSecondClickFromOtherTab(true);
            }
            else {
                setShowClicked(!showClicked);
            }
        }
        setSearchValue('');
        setOptionsList(options);
    };
    const handleMouseLeave = () => {
        if (!disabled) {
            const timeout = setTimeout(() => {
                closeOptions();
            }, 250);
            setCloseTimeout(timeout);
        }
    };
    const dropDownMouseEnter = () => {
        if (closeTimeout !== null) {
            clearTimeout(closeTimeout);
            setCloseTimeout(null);
        }
    };
    const handleSelectOption = (option) => {
        if (!disabled) {
            setSelectedOptions(option);
            closeOptions();
            onClick(option);
            setSearchValue('');
            setOptionsList(options);
        }
        setShowClicked(false);
        setShowOptions(false);
    };
    const handleSearch = (query) => {
        if (!disabled) {
            setSearchValue(query);
            if (!checkEmpty(query)) {
                const staticItem = options[0] ?? { label: '', value: '', iconName: '' };
                const filterData = options
                    .slice(1)
                    .filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));
                setOptionsList([staticItem, ...filterData]);
            }
            else {
                setSearchValue('');
                setOptionsList(options);
            }
        }
    };
    useClickOutside(optionsRef, () => setShowClicked(false), [containerRef]);
    return (_jsxs("div", { className: classNames('ff-all-project', {
            'ff-all-project--disabled': disabled,
        }), ref: containerRef, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { className: classNames('ff-all-project-dropdown', {
                    ['ff-all-project-dropdown--selected']: selected,
                    ['ff-all-project-dropdown--disabled']: disabled,
                }), children: _jsxs("div", { className: classNames('ff-all-project-container'), children: [_jsx(Typography, { as: 'div', lineHeight: '18px', fontSize: 12, fontWeight: selected ? 'semi-bold' : 'regular', className: classNames('projects-label'), onClick: onMenuClick, children: selectedOptions.label.length <= 12
                                ? selectedOptions.label
                                : truncateText(selectedOptions?.label, 12) }), _jsxs("div", { className: classNames('label-icon'), children: [_jsx("div", { className: "icon-click-layer" }), _jsx(Icon, { name: showOptions || showClicked
                                        ? 'arrows_top_icon'
                                        : 'arrows_down_icon', color: disabled
                                        ? 'var(--disabled-icon-color)'
                                        : 'var(--primary-icon-color)', height: 8, width: 8, hoverEffect: false })] })] }) }), (showOptions || showClicked) && !disabled && (_jsxs("div", { className: classNames('ff-projects-dropdown'), ref: optionsRef, onMouseEnter: dropDownMouseEnter, children: [_jsx("div", { className: "ff-dropdown-search-container", onClick: (e) => e.stopPropagation(), children: _jsx(Search, { onSearch: handleSearch, value: searchValue, isExpand: true, onClose: () => { }, onExpand: () => { }, showClose: false, placeholder: placeholder, disabled: disabled, showToaster: false }) }), _jsx("div", { className: classNames('option-card'), children: optionsList.map((option, index) => index === 0 && (_jsxs("div", { onClick: (e) => {
                                e.stopPropagation();
                                handleSelectOption(option);
                            }, className: classNames('ff-projects-options', {
                                ['ff-selected-option']: selectedOption.label === option.label,
                                ['ff-option-disabled']: disabled,
                            }), children: [_jsx("div", { className: classNames('ff-projects-icons'), children: _jsx(Icon, { name: option.iconName, height: 12, width: 12 }) }), _jsx(Typography, { as: 'div', lineHeight: '30px', className: "ff-projects-label", children: option.label }, index)] }, index))) }), _jsx("div", { children: optionsList.length === 1 && (_jsx("div", { className: "ff-no-data-found", children: "-No Projects-" })) }), _jsx("div", { className: classNames('option-card', `${optionsList.length > 4 ? 'scroll' : ''}`), children: optionsList.map((option, index) => index > 0 && (_jsxs("div", { onClick: (e) => {
                                e.stopPropagation();
                                handleSelectOption(option);
                            }, className: classNames('ff-projects-options', {
                                ['ff-selected-option']: selectedOption.label === option.label,
                                ['ff-option-disabled']: disabled,
                            }), children: [_jsx("div", { className: classNames('ff-projects-icons'), children: _jsx(Icon, { name: option.iconName, height: 12, width: 12 }) }), _jsx(Typography, { as: 'div', lineHeight: '30px', className: "ff-projects-label", children: _jsx(Tooltip, { title: isTextTruncated(option.label, 165, 'pixel')
                                            ? option.label
                                            : '', children: truncateText(option.label, 165, 'pixel') }) }, index)] }, index))) })] }))] }));
};
export default AllProjectsDropdown;
//# sourceMappingURL=AllProjectsDropdown.js.map