import React from 'react';
import {
  buildComponentDict,
  PublicPageResponse,
  RenderPageProps,
  WebsiteMenu,
  RenderPage,
} from '@tempi/core-renderer';
import { getNumOfHydratedBlocks } from './utils';
import dynamic from 'next/dynamic';
import { components as coreComponents } from '@tempi/core-elements/next';
import { useGlobalData } from 'contexts';

const MemoizedIFrame = dynamic(() =>
  import('../IFrame').then((mod) => mod.MemoizedIFrame),
);

const componentDict = buildComponentDict({
  ...coreComponents,
});

interface BuilderStoreState {
  globalData?: {
    menu?: WebsiteMenu[];
    prefixLangUrl?: string;
  };
}

export interface ContentProps {
  page: PublicPageResponse;
  envs: any;
  prefixLangUrl?: string;
}

export const Content: React.FC<ContentProps> = ({
  page,
  envs,
  prefixLangUrl,
}) => {
  const { isMobile = false, isBot = false } = useGlobalData();

  if (!page || !page.content) return null;

  const RenderComponentProps: RenderPageProps<{}, BuilderStoreState> = {
    content: page.content,
    configs: {
      env: envs['ENV'],
      device:
        isMobile || page.designMode === 'mobile-only' ? 'mobile' : 'desktop',
      globalData: {
        menu: page.menu || [],
        websiteId: page.websiteId,
        page,
        languages: page.languages,
        currentLanguage: (page.languages || []).find(
          (item) => item.languageCode === page.languageCode,
        ),
        prefixLangUrl,
      },
      featureFlags: {
        flagPB3979: envs['flagPB3979'],
      },
    },
    numOfHydratedBlocks: getNumOfHydratedBlocks(isBot, isMobile),
    componentDict,
  };

  if (page.designMode === 'mobile-only' && !isMobile) {
    return (
      <MemoizedIFrame>
        <RenderPage {...RenderComponentProps} />
      </MemoizedIFrame>
    );
  }

  return (
    <>
      <RenderPage {...RenderComponentProps} />
    </>
  );
};