import { Box, Page, PageProps } from '@wix/design-system';
import React, { ReactNode, 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';

export interface CollectionPageProps extends PageProps {
  /**
   * Accepts [CollectionPage.Header](./?path=/story/base-components-pages-collection-page--collectionpage-header) and [CollectionPage.Content](./?path=/story/base-components-pages-collection-page--collectionpage-content) elements
   * @external
   */
  children?: ReactNode;
}

function _CollectionPage({
  children,
  scrollableContentRef,
  ...rest
}: CollectionPageProps) {
  const wrappedChildren = useCollectionPageChild(children);
  const childrenArr = React.Children.toArray(children);
  const {
    title: pageTitle,
    hideTotal: hideHeaderTotal,
    header,
  } = usePageHeader(childrenArr);
  const container = useWixPatternsContainer();

  const applyMinWidthExperiment = container.internalExperiments?.enabled(
    'specs.cairo.CollectionPageMinWidth',
  );

  const minWidth = applyMinWidthExperiment ? 394 : undefined;

  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 = (
      <Box
        direction="vertical"
        className={st(classes.root, {
          panel: true,
        })}
        width="100%"
        height="100%"
        flex={1}
      >
        {wrappedChildren}
      </Box>
    );
  } else {
    child = (
      <PageWrapperBase pageState={collectionPageState.pageState}>
        <Page
          className={st(classes.root, { mobile: isMobile })}
          scrollableContentRef={(el) => {
            collectionPageState.pageState.scrollableContentRef.current = el;
            scrollableContentRef?.(el);
          }}
          {...rest}
          minWidth={isMobile ? 0 : minWidth}
        >
          {wrappedChildren}
        </Page>
      </PageWrapperBase>
    );
  }

  return (
    <CollectionPageContextProvider value={collectionPageState}>
      {child}
    </CollectionPageContextProvider>
  );
}

_CollectionPage.Header = CollectionPageHeader;
_CollectionPage.Content = CollectionPageContent;
_CollectionPage.Footer = CollectionPageFooter;

_CollectionPage.displayName = 'CollectionPage';

export const CollectionPage = observer(_CollectionPage);