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,
};

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

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

    function openSelectFilesMenu() {
        setHiddenFormSelectFiles(false);
    }

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

    const styleMenu: Style = {};
    if (hiddenMenu) {
        styleMenu.display = 'none';
    }

    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 style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
                    <li><a href="#" onClick={exitMenu}>Exit</a></li>
                </ul>
            </div>
        </div>
    );
}