import * as React from 'react';

import CloseButton from '/components/close-button';
import CenterElement from '/components/center-element';
import FormSelectFiles from '/components/form-select-files';

export interface OverlaySelectFilesProps {
    hiddenFormSelectFiles: boolean;
    setHiddenFormSelectFiles: (c: boolean) => void;
    refInputRom: React.RefObject<HTMLInputElement>;
    refInputSaveState: React.RefObject<HTMLInputElement>;
    onStartEmulation: (e: React.MouseEvent<HTMLInputElement>) => void;
};

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

export default function OverlaySelectFiles({hiddenFormSelectFiles, setHiddenFormSelectFiles, refInputRom, refInputSaveState, onStartEmulation}:OverlaySelectFilesProps) {
    const styleOverlay: Style = {};
    if (hiddenFormSelectFiles) {
        styleOverlay.display = 'none';
    }
    return (
        <div style={styleOverlay} className="overlay-menu-select-files overlay-menu-div">
            <div className="overlay-menu-div-header">
                <CloseButton onClick={() => setHiddenFormSelectFiles(true)}/>
            </div>
            <div className="overlay-menu">
                <CenterElement>
                    <FormSelectFiles refInputRom={refInputRom}
                        refInputSaveState={refInputSaveState}
                        onStartEmulation={onStartEmulation}/>
                </CenterElement>
            </div>
        </div>
    );
}