import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { ButtonGroup, Flex, HStack, Icon, IconButton, Tooltip, } from "@chakra-ui/react";
import { Play, Navigation, Undo, Redo } from "@feedloop/icon";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import LoginAsUser from "./LoginAsUser";
const EditorTopBar = () => {
    const editMode = EditorContext.useSelectState((state) => state.editMode);
    const ready = EditorContext.useSelectState((state) => state.ready);
    const editorActions = EditorContext.useActions();
    const runtimeHistory = RuntimeContext.useHistory();
    const buttonStyle = {
        fontSize: "md",
        color: "gray.900",
        _active: {
            color: "blue.500",
            bg: "blue.50",
        },
    };
    return (_jsxs(Flex, Object.assign({ h: "10", bg: "white", w: "full", borderBottom: "1px solid", borderColor: "gray.300", justifyContent: "space-between" }, { children: [_jsxs(HStack, Object.assign({ alignItems: "center", px: "3" }, { children: [ready ? _jsx(LoginAsUser, {}) : null, _jsxs(HStack, Object.assign({ spacing: "1" }, { children: [_jsx(IconButton, { "aria-label": "undo", icon: _jsx(Icon, { as: Undo, fontSize: "md" }), size: "sm", variant: "ghost", disabled: !runtimeHistory.hasUndo, onClick: runtimeHistory.undo }), _jsx(IconButton, { "aria-label": "redo", icon: _jsx(Icon, { as: Redo, fontSize: "md" }), size: "sm", variant: "ghost", disabled: !runtimeHistory.hasRedo, onClick: runtimeHistory.redo })] }))] })), _jsx(Flex, Object.assign({ alignItems: "center", px: "3" }, { children: _jsxs(ButtonGroup, Object.assign({ size: "xs", variant: "outline", colorScheme: "blue" }, { children: [_jsx(Tooltip, Object.assign({ label: "Edit mode", openDelay: 500, closeOnClick: true, placement: "right-start", hasArrow: true, rounded: "md", arrowSize: 8 }, { children: _jsx(IconButton, Object.assign({ "aria-label": "Edit", icon: _jsx(Navigation, {}) }, buttonStyle, { isActive: editMode === "select", onClick: () => editorActions.setEditMode("select") })) })), _jsx(Tooltip, Object.assign({ label: "Play mode", openDelay: 500, closeOnClick: true, placement: "right-start", hasArrow: true, rounded: "md", arrowSize: 8 }, { children: _jsx(IconButton, Object.assign({ "aria-label": "Play", icon: _jsx(Play, {}) }, buttonStyle, { isActive: editMode === "play", onClick: () => editorActions.setEditMode("play") })) }))] })) }))] })));
};
export default EditorTopBar;
//# sourceMappingURL=EditorTopBar.js.map