import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Icon from '../Icon';
import './AppHeader.scss';
import classNames from 'classnames';
import Typography from '../Typography';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import AllProjectsDropdown from '../AllProjectsDropdown';
import MenuOption from '../MenuOption';
import Tooltip from '../Tooltip';
import { Fragment, useCallback, useEffect, useRef, useState, } from 'react';
import { getStoreValue } from '../../utils/indexDBStore/indexDB';
const AppHeader = ({ logo, profileContent, width, borderRadius, leftContent, rightContent, projectsList, appHeaderMenuItems, selectedMenu, selectedSubMenu, selectedQuickMenu, selectedProject = { label: '', value: '', iconName: '' }, onMenuClick = () => { }, onSubMenuClick = () => { }, onQuickMenuClick = () => { }, onProjectMenuClick = () => { }, onProjectDropdownLabelClick = () => { }, onMoreMenuOptionClick = () => { }, disabled = false, isClient = false, hideNavbar = false, scriptId, centerInfoItems = [], rightButtons = [], }) => {
    const hiddenMenuRef = useRef(null);
    const hiddenQuickMenuRef = useRef(null);
    const [projectArrayList, setProjectArrayList] = useState(projectsList);
    const [quickMenuItems, setQuickMenuItems] = useState([]);
    const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = useState([]);
    const projectDetails = getStoreValue('current-project');
    const timeoutRef = useRef(null);
    const [selectedMenuItem, setSelectedMenuItem] = useState(selectedMenu);
    useEffect(() => {
        if (projectsList !== projectArrayList) {
            setProjectArrayList(projectsList);
        }
    }, [projectsList, projectArrayList]);
    useEffect(() => {
        if (selectedMenu !== selectedMenuItem) {
            setSelectedMenuItem(selectedMenu);
        }
    }, [selectedMenu, selectedMenuItem]);
    const handleMenuClick = (menuItem) => {
        if (!disabled) {
            onMenuClick(menuItem);
            calculateVisibleItems();
        }
    };
    const handleSubMenuClick = (subMenuItem) => {
        if (!disabled) {
            onSubMenuClick(subMenuItem);
            if (timeoutRef.current)
                clearTimeout(timeoutRef.current);
            timeoutRef.current = setTimeout(() => {
                calculateVisibleItems();
            }, 800);
        }
    };
    const handleQuickMenuClick = (quickMenuItem) => {
        if (!disabled) {
            onQuickMenuClick(quickMenuItem);
        }
    };
    const handleProjectMenuClick = (projectItem) => {
        if (projectItem?.value === projectDetails?.id &&
            projectItem?.value !== 'All Projects') {
            return;
        }
        if (!disabled) {
            onProjectMenuClick(projectItem);
            calculateVisibleItems();
        }
    };
    const handleProjectDropdownLabelClick = () => {
        if (!disabled) {
            onProjectDropdownLabelClick();
            calculateVisibleItems();
        }
    };
    const handleMoreMenuOptionClick = (option) => {
        if (!disabled) {
            onMoreMenuOptionClick(option, calculateVisibleItems);
        }
    };
    const menuContainerRef = useRef(null);
    const menuItemsRef = useRef([]);
    const subMenuItemsRef = useRef([]);
    const quickMenuItemsRef = useRef([]);
    const menuItemsWidthRef = useRef({});
    const calculateVisibleItems = useCallback(() => {
        if ((!isClient && projectDetails?.id === 'All Projects') ||
            !menuContainerRef.current) {
            setAppHeaderHiddenMenuItems([]);
            return;
        }
        const containerWidth = isClient ? 700 : 890;
        let totalWidth = 0;
        const visibleItems = [];
        const hiddenItems = [];
        const sortedMenuItems = [...appHeaderMenuItems];
        sortedMenuItems.forEach((item, index) => {
            const itemWidth = menuItemsRef.current[index]?.offsetWidth ??
                menuItemsWidthRef.current[item.label] ??
                0;
            if (itemWidth > 0) {
                menuItemsWidthRef.current[item.label] = itemWidth;
            }
        });
        const currentSelectedMenuItem = sortedMenuItems.find((item) => item.label === selectedMenuItem);
        const otherMenuItems = sortedMenuItems.filter((item) => item.label !== selectedMenuItem);
        if (currentSelectedMenuItem) {
            visibleItems.push(currentSelectedMenuItem);
            totalWidth +=
                menuItemsWidthRef.current[currentSelectedMenuItem.label] ?? 0;
        }
        for (const item of otherMenuItems) {
            const itemWidth = menuItemsWidthRef.current[item.label] ?? 0;
            if (totalWidth + itemWidth > containerWidth) {
                hiddenItems.push(item);
            }
            else {
                visibleItems.push(item);
                totalWidth += itemWidth;
            }
        }
        setAppHeaderHiddenMenuItems(hiddenItems?.map((item) => ({
            label: item.label,
            value: item.path,
            icon: item?.iconName,
        })));
    }, [
        appHeaderMenuItems,
        selectedMenuItem,
        selectedMenu,
        selectedSubMenu,
        selectedQuickMenu,
    ]);
    useEffect(() => {
        const timer = setTimeout(() => {
            calculateVisibleItems();
        }, 800);
        return () => clearTimeout(timer);
    }, [
        projectDetails?.id,
        selectedMenuItem,
        scriptId,
        quickMenuItems,
        selectedSubMenu,
        appHeaderMenuItems,
    ]);
    const checkIsHavingEntityPendingCounts = (data) => {
        if (data.label === 'Approval Request' && data.entityPendingCounts) {
            return Object.values(data.entityPendingCounts).some((count) => count > 0);
        }
        return false;
    };
    useEffect(() => {
        if (appHeaderMenuItems && selectedMenu && selectedSubMenu) {
            const quickMenuItemsData = getQuickMenuItems(appHeaderMenuItems, selectedMenu, selectedSubMenu);
            if (JSON.stringify(quickMenuItemsData) !== JSON.stringify(quickMenuItems)) {
                setQuickMenuItems(quickMenuItemsData || []);
            }
        }
    }, [appHeaderMenuItems, selectedMenu, selectedSubMenu]);
    const getQuickMenuItems = (dataArray, menuLabel, subMenuLabel) => {
        const mainItem = dataArray.find((item) => item.label === menuLabel);
        if (!mainItem) {
            return [];
        }
        const subItem = mainItem?.subMenuItems?.find((sub) => sub.label === subMenuLabel);
        if (!subItem) {
            return [];
        }
        if (subItem.quickMenuItems) {
            return subItem?.quickMenuItems?.filter((quickItem) => !quickItem?.hide);
        }
        else {
            return [];
        }
    };
    return (_jsx("div", { className: classNames('ff-app-header-main'), children: _jsxs("div", { className: "ff-app-header", style: {
                borderStartStartRadius: borderRadius,
                borderStartEndRadius: borderRadius,
            }, children: [_jsxs("div", { className: "ff-app-header-left-container", children: [logo && _jsx("div", { className: "ff-app-header-logo-icon", children: logo }), leftContent && (_jsx("div", { className: "ff-app-header-left-content", children: leftContent }))] }), _jsxs("div", { className: classNames('ff-app-header-nav-bar', {
                        'ff-app-header-nav-bar--with-center-info': !checkEmpty(centerInfoItems) && !checkEmpty(rightButtons),
                    }), style: {
                        width: width,
                        visibility: (checkEmpty(appHeaderMenuItems) &&
                            projectDetails?.id === 'All Projects') ||
                            hideNavbar
                            ? 'hidden'
                            : 'visible',
                        position: 'relative',
                        zIndex: 1,
                    }, ref: menuContainerRef, children: [!checkEmpty(centerInfoItems) && (_jsx("div", { className: classNames('ff-app-header-center-info', {
                                'ff-app-header-center-info--no-right': checkEmpty(rightButtons),
                            }), children: centerInfoItems.map((item, idx) => (_jsxs("div", { className: "ff-app-header-center-info-item", children: [_jsx(Icon, { name: item.iconName, color: item.iconColor }), _jsx(Typography, { children: item.label })] }, idx))) })), !checkEmpty(rightButtons) && (_jsx("div", { className: "ff-app-header-right-buttons", children: rightButtons.map((btn, index) => (_jsxs("button", { className: "ff-app-header-right-button", style: {
                                    color: btn.color,
                                    backgroundColor: btn.backgroundColor,
                                }, onClick: btn.onClick, children: [btn.iconName && _jsx(Icon, { name: btn.iconName }), _jsx(Typography, { fontSize: 10, fontWeight: "semi-bold", children: btn.label })] }, index))) })), projectArrayList && !checkEmpty(projectArrayList) && (_jsx("div", { children: _jsx(AllProjectsDropdown, { onClick: handleProjectMenuClick, options: projectArrayList, selectedOption: selectedProject, onMenuClick: handleProjectDropdownLabelClick, selected: selectedMenuItem === 'All Projects', placeholder: "Search Projects", disabled: disabled }) })), _jsx("div", { className: "ff-app-header-nav-bar-items fontSm", children: appHeaderMenuItems?.map((menuItem, index) => {
                                return (!appHeaderHiddenMenuItems?.find((menu) => menu.label === menuItem.label) &&
                                    !menuItem.hide &&
                                    menuItem.access !== 'No Access' &&
                                    (menuItem?.isReviewer !== false ||
                                        checkIsHavingEntityPendingCounts(menuItem)) &&
                                    menuItem.label !== 'All Projects' && (_jsxs("div", { ref: (element) => (menuItemsRef.current[index] = element), className: classNames('ff-app-header-nav-bar-item', {
                                        ['ff-app-header-nav-bar-item--selected']: menuItem.label === selectedMenuItem,
                                        'ff-app-header-nav-bar-item--disabled': disabled && menuItem.label !== selectedMenuItem,
                                    }), children: [_jsx(Typography, { as: "div", className: "ff-app-header-nav-bar-item-label", lineHeight: "18px", onClick: () => handleMenuClick(menuItem), children: menuItem.label }), menuItem.label === selectedMenuItem &&
                                            menuItem?.subMenuItems && (_jsxs(_Fragment, { children: [menuItem?.subMenuItems?.map((subMenuItem, index) => {
                                                    return (_jsx(Fragment, { children: !subMenuItem.hide && (_jsx("div", { className: "ff-app-header-submenu-container", ref: (element) => (subMenuItemsRef.current[index] = element), children: _jsx(Tooltip, { title: subMenuItem.disable
                                                                    ? subMenuItem.disableText
                                                                    : '', placement: "bottom", children: _jsx(Typography, { as: "div", className: classNames('ff-app-header-nav-bar-submenu-item', {
                                                                        ['ff-app-header-nav-bar-submenu-item--selected']: subMenuItem.label ===
                                                                            selectedSubMenu,
                                                                        'ff-app-header-nav-bar-submenu-item--disabled': disabled || subMenuItem.disable,
                                                                    }), lineHeight: "18px", onClick: () => !subMenuItem.disable &&
                                                                        handleSubMenuClick(subMenuItem), children: subMenuItem.label }) }) })) }, `subMenuItem.label-${index}`));
                                                }), menuItem?.subMenuItems?.map((subMenuItem, index) => {
                                                    return (_jsx(Fragment, { children: !subMenuItem.hide && (_jsx("div", { className: "ff-app-header-submenu-container", ref: (element) => (quickMenuItemsRef.current[index] =
                                                                element), children: subMenuItem.label === selectedSubMenu &&
                                                                subMenuItem?.quickMenuItems &&
                                                                subMenuItem?.quickMenuItems.length > 0 &&
                                                                (() => {
                                                                    const quickMenuItemsArray = quickMenuItems.slice(0, scriptId ? 10 : 8);
                                                                    const quickMenuHiddenItemsArray = quickMenuItems.slice(scriptId ? 10 : 8);
                                                                    const quickMenuHiddenItems = quickMenuHiddenItemsArray?.map((item) => ({
                                                                        ...item,
                                                                        value: item.path,
                                                                        icon: item.iconName,
                                                                    }));
                                                                    return (_jsxs("div", { className: classNames('ff-app-header-quickmenu-container', subMenuItem.quickMenuItems?.length
                                                                            ? 'visible'
                                                                            : ''), children: [!checkEmpty(quickMenuItemsArray) && (_jsx("div", { children: _jsx(Icon, { name: "vertical_separator" }) })), quickMenuItemsArray?.map((quickMenuItem) => {
                                                                                return (_jsx(Fragment, { children: !quickMenuItem.hide && (_jsx("div", { onClick: () => handleQuickMenuClick(quickMenuItem), className: classNames('ff-app-header-nav-bar-quickmenu-item', {
                                                                                            ['ff-app-header-nav-bar-quickmenu-item--selected']: quickMenuItem.path ===
                                                                                                selectedQuickMenu,
                                                                                        }), children: _jsx(Tooltip, { title: quickMenuItem?.label, children: _jsx(Icon, { name: quickMenuItem?.iconName ??
                                                                                                    '', height: 16, width: 16, hoverEffect: true }) }) })) }, quickMenuItem.label));
                                                                            }), quickMenuHiddenItemsArray &&
                                                                                !checkEmpty(quickMenuHiddenItemsArray) && (_jsx("div", { ref: hiddenQuickMenuRef, children: _jsx(MenuOption, { iconName: "more", options: quickMenuHiddenItems, onOptionClick: onQuickMenuClick, dropdownPlacement: "down", zIndex: 1001, tooltipTitle: "More", variant: "light", targetRef: hiddenQuickMenuRef }) }))] }));
                                                                })() })) }, subMenuItem.label));
                                                })] }))] }, menuItem.label)));
                            }) }), appHeaderHiddenMenuItems &&
                            !checkEmpty(appHeaderHiddenMenuItems) && (_jsx("div", { className: "more-menu", ref: hiddenMenuRef, children: _jsx(MenuOption, { iconName: "more", options: appHeaderHiddenMenuItems, onOptionClick: handleMoreMenuOptionClick, variant: "dark", dropdownPlacement: "down", zIndex: 1001, tooltipTitle: "More", optionCardVariant: "default", targetRef: hiddenMenuRef, disabled: disabled }) }))] }), rightContent && (_jsx("div", { className: "ff-app-header-right-content", children: rightContent })), profileContent && (_jsx("div", { className: "ff-app-header-profile-content", children: profileContent }))] }) }));
};
export default AppHeader;
//# sourceMappingURL=AppHeader.js.map