import React, { useRef }  from 'react';
import Settings from './components/Settings/Settings';
import AllPlaylists from './components/AllPlaylists/AllPlaylists';
import CurrentPlaylist from './components/CurrentPlaylist/CurrentPlaylist';
import { SectionBody } from './App.css';
import { PlaylistContext } from './contexts/PlaylistContext/PlaylistContext';
import { PlaylistContext2 } from './contexts/PlaylistContext2/PlaylistContext2';
import { transitions, positions, Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

const { remote } = require('electron');

declare global {
    interface Window { 
        init: (width: number, height: number, rows: number, cols: number) => void;
        gridPlayers: Array<Array<{onFrameReady: (frame:any) => void, play: (filePath?: string) => void, stop: () => void, pause: () => void, togglePause: () => void, position: any, time: number}>>;
        contextsArray: Array<Array<{canvas: any, render: (frame: any, width: any, height: any, uOffset: any, vOffset: any) => void}>>;
        isBusy: Array<Array<boolean>>;
        frameReady: Array<Array<boolean>>;
    }
}

const options = {
    position: positions.BOTTOM_CENTER,
    timeout: 5000,
    offset: '30px',
    transition: transitions.SCALE,
    template: AlertTemplate
}

export default function App(): JSX.Element {
    const playlistRef = useRef();
    const playlist2Ref = useRef();

    return (
        <AlertProvider {...options}>
            <div style={{display:'flex', flexDirection: 'row', height: 'calc(100% - 20px)', padding: 10}}>
                <SectionBody>
                    { /* <AutomaticModeOverlay /> */ }
                    <Settings />
                </SectionBody>
                <SectionBody>
                    { /* <AutomaticModeOverlay /> */ }
                    <AllPlaylists playlistRef={playlistRef} playlist2Ref={playlist2Ref} />
                </SectionBody>
                <SectionBody>
                    <CurrentPlaylist context={PlaylistContext} ref={playlistRef} secondRef={playlist2Ref} number={1} />
                </SectionBody>
                <SectionBody>
                    <CurrentPlaylist context={PlaylistContext2} ref={playlist2Ref} secondRef={playlistRef} number={2}  />
                </SectionBody>
            </div>
        </AlertProvider>
    )
}
