import * as React from 'react';
import CloseButton from '/components/close-button';
import {CLOSE_BUTTON_IMAGE} from '/constants';

export interface OverlayMenuProps {
    hiddenMenu: boolean,
    setHiddenMenu: (c: boolean) => void,
    emulationStarted: boolean,
    setHiddenFormSelectFiles: (c: boolean) => void,
    screenRef: React.RefObject<HTMLDivElement>;
    isFullscreen: boolean;
    setIsFullscreen: (c:boolean) => void;
    firstMenuElement: React.RefObject<HTMLAnchorElement>,
};

interface Style {
    [id: string]: string;
};

export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted,
        setHiddenFormSelectFiles, screenRef, isFullscreen, setIsFullscreen,
        firstMenuElement}: OverlayMenuProps) {
    function exitMenu() {
        setHiddenMenu(true);
    }

    function openSelectFilesMenu() {
        setHiddenFormSelectFiles(false);
    }

    function toggleFullscreen() {
        if (isFullscreen) {
            document.exitFullscreen();
            setIsFullscreen(false);
            return;
        }

        if (screenRef.current != null) {
            screenRef.current.requestFullscreen().then(() => {
                setIsFullscreen(true);
            });
        }
    }

    const styleSelectRom: Style = {};
    if (emulationStarted) {
        styleSelectRom.display = 'none';
    }

    const styleMenu: Style = {};
    if (hiddenMenu) {
        styleMenu.display = 'none';
    }
    let toggleFullscreenText: string = 'Set fullscreen';
    if (isFullscreen) {
        toggleFullscreenText = 'End fullscreen';
    }

    return (
        <div style={styleMenu} className="overlay-menu-div">
            <div className="overlay-menu-div-header">
                <CloseButton onClick={exitMenu}/>
            </div>
            <div className="overlay-menu">
                <ul>
                    <li><a ref={firstMenuElement} style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
                    <li><a onClick={toggleFullscreen} href="#">{toggleFullscreenText}</a></li>
                    <li><a href="#" onClick={exitMenu}>Exit</a></li>
                </ul>
            </div>
        </div>
    );
}