import { Box, Page } from '@wix/design-system';
import React, { useEffect, useState } from 'react';
import { useCollectionPageChild } from '../../hooks/useCollectionPageChild';
import { CollectionPageHeader } from '../CollectionPageHeaderNew';
import { PageWrapperBase } from '../PageWrapper';
import { CollectionPageContent } from '../CollectionPageContent';
import { observer } from 'mobx-react-lite';
import { CollectionPageContextProvider } from '../../providers';
import { usePageHeader } from '../../hooks/usePageHeaderNew';
import { classes, st } from './CollectionPage.st.css.js';
import { useCollectionPageState, useWixPatternsContainer, } from '@wix/bex-core/react';
import { useCollectionPageLoadReporting } from './useCollectionPageLoadReporting';
import { useIsMobile } from '../../hooks/useIsMobile';
import { CollectionPageFooter } from '../CollectionPageFooter';
function _CollectionPage({ children, scrollableContentRef, ...rest }) {
    const wrappedChildren = useCollectionPageChild(children);
    const childrenArr = React.Children.toArray(children);
    const { title: pageTitle, hideTotal: hideHeaderTotal, header, } = usePageHeader(childrenArr);
    const container = useWixPatternsContainer();
    const [reportBI] = useState(() => container.createBILogger({
        componentType: 'Collection page',
        pageType: 'Collection',
        route: window.location.pathname,
    }));
    const collectionPageState = useCollectionPageState({
        reportBI,
        pageTitle,
        hasHeader: header != null,
        hideHeaderTotal,
    });
    useEffect(() => collectionPageState.init(), []);
    useCollectionPageLoadReporting({
        startTime: collectionPageState.startTime,
        withinRouter: !!collectionPageState.withinRouter,
    });
    const isMobile = useIsMobile();
    let child;
    if (container.isPanelLayout) {
        child = (React.createElement(Box, { direction: "vertical", className: st(classes.root, {
                panel: true,
            }), width: "100%", height: "100%", flex: 1 }, wrappedChildren));
    }
    else {
        child = (React.createElement(PageWrapperBase, { pageState: collectionPageState.pageState },
            React.createElement(Page, { className: st(classes.root, { mobile: isMobile }), scrollableContentRef: (el) => {
                    collectionPageState.pageState.scrollableContentRef.current = el;
                    scrollableContentRef?.(el);
                }, ...rest, minWidth: isMobile ? 0 : undefined }, wrappedChildren)));
    }
    return (React.createElement(CollectionPageContextProvider, { value: collectionPageState }, child));
}
_CollectionPage.Header = CollectionPageHeader;
_CollectionPage.Content = CollectionPageContent;
_CollectionPage.Footer = CollectionPageFooter;
_CollectionPage.displayName = 'CollectionPage';
export const CollectionPage = observer(_CollectionPage);
//# sourceMappingURL=CollectionPage.js.map