import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './fonts/awesome/css/solid.css';
import './fonts/awesome/css/fontawesome.css';
import './fonts/awesome/js/fontawesome';
import { ConfigContext } from './contexts/ConfigContext/ConfigContext';
import { useConfig } from './contexts/ConfigContext/useConfig';
import { AllPlaylistsContext } from './contexts/AllPlaylistsContext/AllPlaylistsContext';
import { useAllPlaylists } from './contexts/AllPlaylistsContext/useAllPlaylists';
import { PlaylistContext } from './contexts/PlaylistContext/PlaylistContext';
import { PlaylistContext2 } from './contexts/PlaylistContext2/PlaylistContext2';
import { usePlaylist } from './contexts/PlaylistContext/usePlaylist';
import { usePlaylist as usePlaylist2 } from './contexts/PlaylistContext2/usePlaylist';

function Container() {
    const config = useConfig();
    const allPlaylists = useAllPlaylists();
    const playlist = usePlaylist();
    const playlist2 = usePlaylist2();
    return (
        <ConfigContext.Provider value={config}>
            <AllPlaylistsContext.Provider value={allPlaylists}>
                <PlaylistContext.Provider value={playlist}>
                    <PlaylistContext2.Provider value={playlist2}>
                        <App />
                    </PlaylistContext2.Provider>
                </PlaylistContext.Provider>
            </AllPlaylistsContext.Provider>
        </ConfigContext.Provider>
    );
}

const domContainer = document.querySelector('#app');
ReactDOM.render(<Container />, domContainer);
