// Root.jsx
import { React, useContext, useState, useEffect } from 'react';
import { toast } from 'react-toastify';
import Alert from '@mui/joy/Alert';
import WarningIcon from '@mui/icons-material/Warning';
import {JoyUIRootIsland} from './Components.jsx';
import CustomToastContainer from '../components/ToastProvider.jsx';
import { PrimeReactProvider } from "primereact/api";
import { API_URL } from "../config";
import { Player } from "./AudioPlayer.jsx";
import LyricSearch from './LyricSearch.jsx';


export default function Root({child}) {
  window.toast = toast;
  window.API_URL = API_URL;
  const theme = document.documentElement.getAttribute("data-theme")
  // console.log(opts.children);
  return (
    <PrimeReactProvider>
    <CustomToastContainer
    theme={theme}
    newestOnTop={true}
    closeOnClick={true}/>
    <JoyUIRootIsland>
    <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"></Player>)}
    </JoyUIRootIsland>
    </PrimeReactProvider>
  );
}