import * as React from 'react';
import {HOME_BUTTON_IMAGE} from '/constants';

export interface OverlayControlsProps {
    firstMenuElement: React.RefObject<HTMLAnchorElement>,
    setHiddenMenu: (c: boolean) => void,
};

export default function OverlayControls({firstMenuElement, setHiddenMenu}: OverlayControlsProps) {
    function showOverlayMenu() {
        setHiddenMenu(false);
        setTimeout(() => {
            if (firstMenuElement.current == null) {
                return;
            }
            firstMenuElement.current.focus();
        }, 100);
    }
    return (
        <div className="overlay">
            <div className="vertical-padding">
            </div>
            <div className="controls">
                <a href="#" className="gear control" onClick={showOverlayMenu}>
                    <img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
                </a>
                <a href="#" className="control-a control control-button">A</a>
                <a href="#" className="control-b control control-button">B</a>
            </div>
        </div>
    );
}