import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useContext } from 'react';
import { App as DSApp } from 'antd';
import { CANVAS_ROOT } from '../consts/root-nodes';
import { Explorer, Inspector, Toolbar, BottomBar, SettingsModal, } from './modules';
import { useUnsavedChanges } from './hooks';
import { EngineContext } from './providers';
import { EditorCSS, EditorMainStyled, ExplorerStyled, CanvasStyled, ToolbarStyled, InspectorStyled, } from './app.style';
export const App = () => {
    const context = useContext(EngineContext);
    useUnsavedChanges();
    return (_jsxs(DSApp, { css: EditorCSS, children: [_jsxs(EditorMainStyled, { children: [_jsx(ExplorerStyled, { children: context && _jsx(Explorer, {}) }), _jsxs(CanvasStyled, { children: [_jsx(ToolbarStyled, { children: context && _jsx(Toolbar, {}) }), _jsx("div", { id: CANVAS_ROOT })] }), _jsx(InspectorStyled, { children: context && _jsx(Inspector, {}) })] }), context && _jsx(BottomBar, {}), context && _jsx(SettingsModal, {})] }));
};
