import React, { ReactNode, RefObject, Suspense } from 'react';
import { WixPatternsTestProvider } from '../components';
import { Page, WixStyleReactEnvironmentProvider } from '@wix/design-system';
import { WixPatternsContainerProvider } from '@wix/bex-core/react';
import { WixPatternsContainerDriver } from '@wix/bex-core/testkit/internal';
import { EssentialsProvider } from '@wix/fe-essentials/react';
import { EntityPageState } from '../state';
import { CollectionPageState } from '@wix/bex-core';
import { EntityPage } from '../components/EntityPage';
import { CollectionPage } from '../components/CollectionPageNew';
import { PageWrapper } from '../components/PageWrapper/PageWrapper';
import { History } from 'history';

const CairoTestAppRouter = React.lazy(() =>
  import('./CairoTestAppRouter').then((module) => ({
    default: module.CairoTestAppRouter,
  })),
);
import { CollectionPageHeaderProps } from '../components/CollectionPageHeaderNew';

export interface CairoTestAppProps {
  driver: WixPatternsContainerDriver;
  children?: ReactNode;
  page?:
    | 'none'
    | 'wsr'
    | 'entity'
    | 'entity-page'
    | 'collection-page'
    | 'router';
  scrollElement?: RefObject<HTMLDivElement>;
  entityPageState?: EntityPageState<any>;
  collectionPageState?: CollectionPageState;
  routerParams?: { history: History };
  collectionPageHeaderProps?: Partial<CollectionPageHeaderProps>;
}

export function CairoTestApp({
  children,
  driver,
  page,
  scrollElement,
  entityPageState,
  collectionPageState,
  routerParams,
  collectionPageHeaderProps,
}: CairoTestAppProps) {
  let child = children;

  switch (page) {
    case 'wsr':
      child = (
        <Page>
          <Page.Header title="Page Title" />
          <Page.Content>{children}</Page.Content>
        </Page>
      );
      break;
    case 'entity':
      child = (
        <Page>
          <Page.Content>{children}</Page.Content>
        </Page>
      );
      break;
    case 'none':
      child = (
        <div
          ref={scrollElement}
          data-hook="custom-scroll-container"
          style={{ height: '200px', overflow: 'auto' }}
        >
          {child}
        </div>
      );
      break;
    case 'entity-page':
      if (!entityPageState) {
        throw new Error('Page state was not initialized');
      }
      child = (
        <EntityPage state={entityPageState} dataHook={page}>
          {children}
        </EntityPage>
      );
      break;
    case 'collection-page':
      if (!collectionPageState) {
        throw new Error('Page state was not initialized');
      }
      child = (
        <CollectionPage dataHook={page}>
          <CollectionPage.Header
            title={{
              text: collectionPageState.pageTitle || 'Title',
              hideTotal: collectionPageState.hideHeaderTotal,
            }}
            {...collectionPageHeaderProps}
          />
          <CollectionPage.Content>{children}</CollectionPage.Content>
        </CollectionPage>
      );
      break;
    case 'router':
      if (!routerParams) {
        throw new Error('Router params were not initialized');
      }

      child = (
        <Suspense fallback={<div>Loading router...</div>}>
          <CairoTestAppRouter>{children}</CairoTestAppRouter>
        </Suspense>
      );
      break;
    default:
      child = (
        <PageWrapper>
          <Page>
            <Page.Content>{children}</Page.Content>
          </Page>
        </PageWrapper>
      );
      break;
  }

  return (
    <EssentialsProvider essentials={driver.testContext}>
      <WixStyleReactEnvironmentProvider
        locale={driver.testContext.environment.language}
      >
        <WixPatternsTestProvider>
          <WixPatternsContainerProvider value={driver.container}>
            {child}
          </WixPatternsContainerProvider>
        </WixPatternsTestProvider>
      </WixStyleReactEnvironmentProvider>
    </EssentialsProvider>
  );
}