import { LoadingPage } from '@tempi/editor-site';
import { lazy, Suspense, useEffect } from 'react';
import ReactTracker from 'react-tracker-teko';

const WbeSite = lazy(() => import('./sites/wb-editor/Site'));
const LandingSite = lazy(() => import('sites/ldp-editor/Site'));
const DemoSite = lazy(() => import('./sites/demo-editor/Site'));

const { tracker } = window?.config || {};

export const TempiRoute = () => {
  useEffect(() => {
    // init teko-tracking
    new ReactTracker({
      // Configure your tracker server and site by providing
      host: tracker?.host,
      urlServeJsFile: tracker?.jsFile,
      appId: tracker?.appId,
    });
  }, []);

  const render = () => {
    switch (window.location.hostname) {
      case window.hostnameMapping?.wbeSite:
      case window.hostnameMapping?.wbeGlobalSite:
        return <WbeSite />;
      case window.hostnameMapping?.ldeGlobalSite:
      case window.hostnameMapping?.ldeSite:
        return <LandingSite />;
      case window.hostnameMapping?.demoSite:
        return <DemoSite />;
      default:
        return <WbeSite />;
    }
  };
  return <Suspense fallback={<LoadingPage />}>{render()}</Suspense>;
};