import type { FC } from 'react';
import React, { Suspense } from 'react';
import { PageContext } from '@theorchard/suite-components';
import cx from 'classnames';
import { useLocation } from 'react-router-dom';
import { FRAMEWORK_CLASS_NAME } from '../../constants';
import { ErrorPage } from '../../pages/errorPage';
import { SplashPage } from '../../pages/splashPage';
import Segment from '../../segment';
import { SentryErrorBoundary } from '../sentryErrorBoundary';
import type { RouteComponentProps } from 'react-router-dom';

const CLASS_NAME = 'PageContainer';

interface PageContainerProps {
    page: React.FC<RouteComponentProps>;
    className?: string;
    route: RouteComponentProps;
}

export const PageContainer: FC<PageContainerProps> = ({ page: Page, className, route }) => {
    const { pathname } = useLocation();
    React.useEffect(() => {
        void Segment.trackPage();
    }, [pathname]);

    return (
        <PageContext.Provider value={{ className: cx(FRAMEWORK_CLASS_NAME, className) }}>
            <div className={cx(CLASS_NAME, className)} data-testid={CLASS_NAME}>
                <SentryErrorBoundary errorComponent={({ error }) => <ErrorPage error={error} />}>
                    <Suspense fallback={<SplashPage />}>
                        <Page {...route} />
                    </Suspense>
                </SentryErrorBoundary>
            </div>
        </PageContext.Provider>
    );
};