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 { useIsMobile } from '../../hooks/useIsMobile';
import { classes, st } from './CollectionPageHeader.st.css.js';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { PanelHeader } from './PanelHeader';
import { CollectionPageActionsBar } from './CollectionPageActionsBar';
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(CollectionPageActionsBar, { child: child }), breadcrumbs: isMobile
            ? () => {
                return React.createElement("div", null);
            }
            : child.props.breadcrumbs }));
}
const CollectionPageHeaderTitle = observer(({ minimized }) => {
    const state = useCollectionPageContext();
    const isMobile = useIsMobile();
    if (minimized) {
        return React.createElement(React.Fragment, null, state.pageTitle);
    }
    return (React.createElement(Heading, { size: isMobile ? 'large' : 'extraLarge' },
        React.createElement(Box, { inline: true, maxLines: 1, paddingRight: "9px", minWidth: 0, width: "100%" },
            React.createElement(Heading, { size: isMobile ? 'large' : 'extraLarge', ellipsis: true, showTooltip: !isMobile, placement: "bottom" }, state.pageTitle),
            state.total !== false && !state.hideHeaderTotal && (React.createElement(Box, { inline: true, color: "D40", paddingLeft: "9px", dataHook: "page-header-total-count" }, state.total)))));
});
//# sourceMappingURL=useCollectionPageHeader.js.map