import React from 'react';
import { Box, Heading, Page } from '@wix/design-system';
import { useCollectionPageContext } from '../../providers';
import { observer } from 'mobx-react-lite';
import { PageSubTitle } from '../../components/PageSubTitle';
import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
import { useIsMobile } from '../../hooks/useIsMobile';
import { classes, st } from './CollectionPageHeader.st.css.js';
import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
import { MoreActions } from '../../components/MoreActions';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { PanelHeader } from './PanelHeader';
const MoreActionsBySecondaryAction = observer(({ child }) => {
    const pageState = useCollectionPageContext();
    const { primaryToolbar } = pageState;
    const featuredActions = primaryToolbar?.getPageFeaturedActions();
    const forceMoreActions = featuredActions?.length ? (React.createElement(MoreActions, null)) : undefined;
    const moreActions = child.props.moreActions ?? forceMoreActions;
    if (!moreActions) {
        return null;
    }
    const { type: MoreActionsElementType, props: moreActionsProps } = moreActions;
    let items = moreActionsProps.items;
    if (featuredActions) {
        for (const factory of featuredActions) {
            items = pushFactoryIfNotExistsOrAddToTopOfGroup(items, factory);
        }
    }
    if (child.props.secondaryActions) {
        return React.createElement(MoreActionsElementType, { ...moreActionsProps, items: items });
    }
    return React.createElement(MoreActionsText, { ...moreActionsProps, items: items });
});
export function useCollectionPageHeader(child) {
    const isMobile = useIsMobile();
    const { isPanelLayout } = useWixPatternsContainer();
    if (isPanelLayout) {
        return (React.createElement(PanelHeader, { title: child.props.title.text, subtitle: child.props.subtitle?.text }));
    }
    return (React.createElement(Page.Header, { key: child.key, className: st(classes.root, { mobile: isMobile }), dataHook: "collection-page-header", title: (minimized) => React.createElement(CollectionPageHeaderTitle, { minimized: minimized }), subtitle: child.props.subtitle ? (React.createElement(PageSubTitle, { ...child.props.subtitle })) : undefined, actionsBar: React.createElement(Box, { gap: "SP2" },
            !isMobile && React.createElement(MoreActionsBySecondaryAction, { child: child }),
            !isMobile && child.props.secondaryActions,
            child.props.primaryAction), breadcrumbs: isMobile
            ? () => {
                return React.createElement("div", null);
            }
            : child.props.breadcrumbs }));
}
const CollectionPageHeaderTitle = observer(({ minimized }) => {
    const state = useCollectionPageContext();
    const isMobile = useIsMobile();
    const titleContent = (React.createElement(React.Fragment, null,
        React.createElement(Box, { inline: true, paddingRight: "9px" }, state.pageTitle),
        state.total !== false && !state.hideHeaderTotal && (React.createElement(Box, { inline: true, color: "D40", dataHook: "page-header-total-count" }, state.total))));
    if (minimized) {
        return titleContent;
    }
    return (React.createElement(Heading, { size: isMobile ? 'large' : 'extraLarge' }, titleContent));
});
//# sourceMappingURL=useCollectionPageHeader.js.map