import { observer } from "mobx-react-lite";

import { state } from "../state";
import type { RunningGameState } from "../types";

export const Toolbar = observer(function () {

    function handleCloneTest1Object(): void {
        state.worldEditor.addObjectCloneAtRandomPosition('test1');
    }

    function handleLoadMockWorld(): void {
        state.world.loadMock();
    }

    return <div className="toolbar">
        {state.worldEditor.isEnabled && <div>EDITOR MODE</div>}
        {state.world.isPlaying
            ? <>
                <button onClick={() => state.world.stop()}>Stop</button>
                {
                    (state.world.data.state as RunningGameState).paused
                        ? <button onClick={() => state.world.play()}>Play</button>
                        : <button onClick={() => state.world.pause()}>Pause</button>
                }
            </>
            : <button onClick={() => state.world.play()}>Play</button>
        }
        <button onClick={handleLoadMockWorld}>Load mock world</button>
        <button onClick={handleCloneTest1Object}>Clone test1</button>
    </div>
});