import React, { Suspense, lazy } from 'react';
import Memes from './Memes.jsx';
import Lighting from './Lighting.jsx';
import { toast } from 'react-toastify';
import { JoyUIRootIsland } from './Components.jsx';
import { PrimeReactProvider } from "primereact/api";
import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.jsx';
import CustomToastContainer from '../components/ToastProvider.jsx';
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import "primeicons/primeicons.css";

const LoginPage = lazy(() => import('./Login.jsx'));
const LyricSearch = lazy(() => import('./LyricSearch'));
const MediaRequestForm = lazy(() => import('./TRip/MediaRequestForm.jsx'));
const RequestManagement = lazy(() => import('./TRip/RequestManagement.jsx'));
const Player = lazy(() => import('./AudioPlayer.jsx'));

export default function Root({ child, user = undefined }) {
  window.toast = toast;
  const theme = document.documentElement.getAttribute("data-theme")
  usePrimeReactThemeSwitcher(theme);
  return (
    <PrimeReactProvider>
      <CustomToastContainer
        theme={theme}
        newestOnTop={true}
        closeOnClick={true} />
      <JoyUIRootIsland>
        {/* <Alert
        className="alert"
        startDecorator={<WarningIcon />}
        variant="soft"
        color="danger">
          Work in progress... bugs are to be expected.
        </Alert> */}
        {child == "LoginPage" && (<LoginPage client:only="react" />)}
        {child == "LyricSearch" && (<LyricSearch client:only="react" />)}
        {child == "Player" && (<Player client:only="react" user={user} />)}
        {child == "Memes" && <Memes client:only="react" />}
        {child == "qs2.MediaRequestForm" && <MediaRequestForm client:only="react" />}
        {child == "qs2.RequestManagement" && <RequestManagement client:only="react" />}
        {child == "Lighting" && <Lighting key={window.location.pathname + Math.random()} client:only="react" />}
      </JoyUIRootIsland>
    </PrimeReactProvider>
  );
}