import { observer } from 'mobx-react-lite';
import { state } from '../state';
import './MenuView.scss';

export const MenuView = observer(function () {
    const objectIds = Object.keys(state.worldEditor.scene.objects);
    const selectedId = state.worldEditor.selectedObjectId;

    return (
        <nav className="menu">
            <details open className="menu-node">
                <summary className="menu-item">Editor</summary>
                <details open className="menu-node">
                    <summary
                        className={`menu-item${selectedId == null ? ' active' : ''}`}
                        onClick={() => state.worldEditor.resetSelectedObject()}
                    >
                        Objects
                    </summary>
                    {objectIds.map(id => (
                        <div
                            key={id}
                            className={`menu-item menu-leaf${selectedId === id ? ' active' : ''}`}
                            onClick={() => state.worldEditor.setSelectedObject(id, 'translate')}
                        >
                            {id}
                        </div>
                    ))}
                </details>
            </details>
        </nav>
    );
});