import React, { useState } from 'react';
import parse from 'html-react-parser';
import { PublicPageResponse, publicBffUrl } from '@tempi/core-renderer';
import { ScriptSection } from 'components/ScriptSection';
import { useGlobalData } from 'contexts';
import { usePagePublic, UsePagePublicInterface } from 'hooks/usePagePublic';
import ErrorBoundary from 'components/ErrorView/ErrorBoundary';
import dynamic from 'next/dynamic';
import { useScrollPage } from 'hooks/useScrollPage';
import { HeadSection, ErrorView, ProtectedView } from 'components';

const LoadingOverlay = dynamic(() =>
  import('../LoadingOverlay/LoadingOverlay').then((mod) => mod.LoadingOverlay),
);
const Content = dynamic(() => import('./Content').then((mod) => mod.Content));
const forbiddenErrorCode = '403000';

export interface LandingPropsV2 extends UsePagePublicInterface {
  page: PublicPageResponse;
}

export const LandingPageV2: React.FC<LandingPropsV2> = ({
  page: serverPage,
  prefixLangUrl,
  ...rest
}: LandingPropsV2) => {
  useScrollPage();

  const { isMobile } = useGlobalData();
  const [password, setPassword] = useState<string | null>();
  const {
    page = serverPage,
    error,
    isLoading,
  } = usePagePublic({ ...rest, password });

  const envs = rest?.envs || {};
  const showLoading =
    (envs['REVALIDATE_PAGE_FLAG'] && envs['SHOW_LOADING_FLAG']) || false;
  const EXTEND_LOADING_TIME = envs['EXTEND_LOADING_TIME'] || 0;

  const extraInfo = page?.extraInfo || {};

  // debug mem peak
  if (typeof process !== 'undefined') {
    const used = process?.memoryUsage?.();
    if (used) {
      const heapUsed = used.heapUsed / 1024 / 1024;
      if (heapUsed > 500)
        // eslint-disable-next-line no-console
        console.log(
          rest.hostname,
          rest.slug,
          `The script uses approximately ${
            Math.round(heapUsed * 100) / 100
          } MB`,
        );
    }
  }

  if (error?.response?.code == 404001) {
    return (
      <ErrorView statusCode={404} description="This page could not be found." />
    );
  }

  if (
    (rest.errorCode === forbiddenErrorCode ||
      error?.response?.code === forbiddenErrorCode) &&
    !page
  ) {
    return (
      <>
        <ProtectedView
          password={password}
          langCode={rest.languageCode}
          setPassword={setPassword}
          isLoading={isLoading}
        />
      </>
    );
  }

  return (
    <>
      {showLoading && (
        <LoadingOverlay loading={isLoading} extendTime={EXTEND_LOADING_TIME} />
      )}
      <ErrorBoundary>
        <HeadSection
          {...extraInfo}
          metaTitle={extraInfo.metaTitle || page?.name}
          canonical={page?.canonical}
        >
          <link
            rel="preconnect"
            href={publicBffUrl[envs['ENV']]}
            crossOrigin="anonymous"
          />
        </HeadSection>
        <ScriptSection
          tekoTrackingAppId={
            isMobile
              ? extraInfo.tekoTrackingWebMobile
              : extraInfo.tekoTrackingWebDesktop
          }
          configs={{
            env: envs['ENV'],
          }}
          facebookPixelId={extraInfo.facebookPixelId}
          googleAdsId={extraInfo.googleAdsId}
          googleAnalyticsId={extraInfo.googleAnalyticsId}
          googleTagManagerId={extraInfo.googleTagManagerId}
          tiktokPixelId={extraInfo.tiktokPixelId}
        />
        <Content prefixLangUrl={prefixLangUrl} page={page} envs={envs} />
        {extraInfo.bodyContentHtml && parse(extraInfo.bodyContentHtml)}
      </ErrorBoundary>
    </>
  );
};