// Root.jsx
import { toast } from 'react-toastify';
import { Player } from './AudioPlayer.jsx';
import Memes from './Memes.jsx';
import { JoyUIRootIsland } from './Components.jsx';
import { PrimeReactProvider } from "primereact/api";
import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.jsx';
import CustomToastContainer from '../components/ToastProvider.jsx';
import LyricSearch from './LyricSearch.jsx';
import MediaRequestForm from './qs2/MediaRequestForm.jsx';
import RequestManagement from './qs2/RequestManagement.jsx';
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
import 'primereact/resources/primereact.min.css';

export default function Root({ child }) {
  window.toast = toast;
  const theme = document.documentElement.getAttribute("data-theme")
  usePrimeReactThemeSwitcher(theme);
  // console.log(opts.children);
  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 == "LyricSearch" && (<LyricSearch client:only="react" />)}
        {child == "Player" && (<Player client:only="react" />)}
        {child == "Memes" && <Memes client:only="react" />}
        {child == "qs2.MediaRequestForm" && <MediaRequestForm client:only="react" />}
        {child == "qs2.RequestManagement" && <RequestManagement client:only="react" />}
      </JoyUIRootIsland>
    </PrimeReactProvider>
  );
}

