import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Else, If, Then } from 'react-if';
import { useCountChildren, useIntersection } from './GroupHeader.hooks.js';
import { Bold, HeaderContainer, HeaderDetailsText, LevelButton } from './GroupHeader.styles.js';
export const GroupHeader = /*#__PURE__*/ memo(function GroupHeader({ columnName , props , children , lazyLoadGroups  }) {
    const { group , onToggleCollapse  } = props;
    const ref = useRef();
    // whether the element toggle is manual or by visibility on scroll
    const [manualToggle, setManualToggle] = useState(false);
    // trigger as soon as the element becomes visible
    const inViewport = useIntersection(ref.current, '0px');
    const countChildren = useCountChildren();
    useEffect(()=>{
        if (inViewport && group?.isCollapsed) {
            onToggleCollapse?.(group);
        }
    }, [
        inViewport,
        group,
        onToggleCollapse
    ]);
    const onManualLevelToggle = useCallback(()=>{
        setManualToggle(true);
        onToggleCollapse?.(group);
    }, [
        group,
        onToggleCollapse,
        setManualToggle
    ]);
    const shouldLazyLoad = useMemo(()=>{
        return lazyLoadGroups && group?.level > 0 && !manualToggle;
    }, [
        group,
        lazyLoadGroups,
        manualToggle
    ]);
    return /*#__PURE__*/ _jsxs(HeaderContainer, {
        // uses the ref to toggle if element is into view if the user didn't toggled it with the button
        ref: (element)=>ref.current = shouldLazyLoad ? element : undefined,
        groupLevel: group?.level,
        children: [
            /*#__PURE__*/ _jsx(LevelButton, {
                onClick: onManualLevelToggle,
                iconProps: {
                    iconName: group?.isCollapsed ? 'ChevronRight' : 'ChevronDown'
                }
            }),
            /*#__PURE__*/ _jsxs(If, {
                condition: !!children,
                children: [
                    /*#__PURE__*/ _jsx(Then, {
                        children: children
                    }),
                    /*#__PURE__*/ _jsxs(Else, {
                        children: [
                            /*#__PURE__*/ _jsx(HeaderDetailsText, {
                                children: /*#__PURE__*/ _jsxs(Bold, {
                                    children: [
                                        columnName ? `${columnName}  - ` : '',
                                        group?.name
                                    ]
                                })
                            }),
                            /*#__PURE__*/ _jsxs(HeaderDetailsText, {
                                children: [
                                    "Children: ",
                                    group?.count
                                ]
                            }),
                            group?.children && /*#__PURE__*/ _jsxs(HeaderDetailsText, {
                                children: [
                                    "Total Items: ",
                                    countChildren(group?.children)
                                ]
                            })
                        ]
                    })
                ]
            })
        ]
    });
});
