import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable no-undef,react/jsx-no-target-blank */
import '@ant-design/compatible/assets/index.css';
import { Alert, Layout } from 'antd';
import { Component, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { Root } from '@cube-dev/ui-kit';
import { CubeLoader } from './atoms';
import { AppContextConsumer } from './components/AppContext';
import GlobalStyles from './components/GlobalStyles';
import Header from './components/Header/Header';
import { LivePreviewContextProvider } from './components/LivePreviewContext/LivePreviewContextProvider';
import { event, setAnonymousId, setTelemetry, setTracker, trackImpl, } from './events';
import { useAppContext } from './hooks';
import { QUERY_BUILDER_COLOR_TOKENS } from './QueryBuilderV2';
const StyledLayoutContent = styled(Layout.Content) `
  height: 100%;
`;
const ROOT_STYLES = {
    height: 'min 100vh',
    display: 'grid',
    gridTemplateRows: 'min-content 1fr',
    ...QUERY_BUILDER_COLOR_TOKENS,
};
class App extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            fatalError: null,
            context: null,
            showLoader: false,
            isAppContextSet: false,
        };
    }
    static getDerivedStateFromError(error) {
        return { fatalError: error };
    }
    async componentDidMount() {
        setTimeout(() => this.setState({ showLoader: true }), 700);
        window.addEventListener('unhandledrejection', (promiseRejectionEvent) => {
            const error = promiseRejectionEvent.reason;
            console.log(error);
            const e = (error.stack || error).toString();
            event('Playground Error', {
                error: e,
            });
        });
        const res = await fetch('playground/context');
        const context = await res.json();
        setTelemetry(context.telemetry);
        setTracker(trackImpl);
        setAnonymousId(context.anonymousId, {
            coreServerVersion: context.coreServerVersion,
            projectFingerprint: context.projectFingerprint,
            isDocker: Boolean(context.isDocker),
            dockerVersion: context.dockerVersion,
        });
        this.setState({ context });
    }
    componentDidCatch(error, info) {
        event('Playground Error', {
            error: (error.stack || error).toString(),
            info: info.toString(),
        });
    }
    render() {
        const { location, children } = this.props;
        const { context, fatalError, isAppContextSet, showLoader } = this.state;
        if (context != null && !isAppContextSet) {
            return (_jsxs(_Fragment, { children: [_jsx(ContextSetter, { context: context }), _jsx(AppContextConsumer, { onReady: () => this.setState({ isAppContextSet: true }) })] }));
        }
        if (context == null && !isAppContextSet) {
            return showLoader ? _jsx(CubeLoader, {}) : null;
        }
        if (fatalError) {
            console.log(fatalError.stack);
        }
        return (_jsx(LivePreviewContextProvider, { disabled: !context?.livePreview, children: _jsxs(Root, { publicUrl: ".", styles: ROOT_STYLES, children: [_jsx(GlobalStyles, {}), _jsx(Header, { selectedKeys: [location.pathname] }), _jsx(StyledLayoutContent, { children: fatalError ? (_jsx(Alert, { message: "Error occured while rendering", description: fatalError.stack || '', type: "error" })) : (children) })] }) }));
    }
}
function ContextSetter({ context }) {
    const { setContext } = useAppContext();
    useEffect(() => {
        if (context !== null) {
            setContext({
                ready: true,
                playgroundContext: {
                    ...context,
                    isCloud: false,
                },
                identifier: context.identifier,
            });
        }
    }, [context]);
    return null;
}
export default withRouter(App);
//# sourceMappingURL=App.js.map