import { jsx as _jsx } from "react/jsx-runtime";
import { Suspense, lazy, memo, useEffect, useState } from 'react';
import { useAtomValue } from 'jotai';
import { globalOptionsAtom } from '../../jotai/store.js';
import { operationStore } from '../../jotai/operation.js';
import { appStore, environmentsAtom } from '../../jotai/app.js';
import { useTranslate } from '../../hooks/index.js';
import { convertOperationToReplayValue } from './utils.js';
import { getDefaultCollectorUrl } from '../../utils/telemetry.js';
import { styled } from '../../styled-components.js';
const EmbeddedReplayOrig = lazy(async () => import('@redocly/replay').then((module) => ({ default: module.EmbeddedReplay })));
function EmbeddedReplayComponent({ activeOperationId, corsProxyUrl, fullOpenApi, pointer, }) {
    const translate = useTranslate();
    const { mockServer } = useAtomValue(globalOptionsAtom);
    const operationState = useAtomValue(operationStore(pointer));
    const appState = useAtomValue(appStore);
    const envs = useAtomValue(environmentsAtom);
    // do not render on the server, it produces some SSR Suspense error
    const [loaded, setLoaded] = useState(false);
    useEffect(() => {
        setLoaded(true);
    }, []);
    return (_jsx(CompactWrapper, { children: loaded ? (_jsx(Suspense, { fallback: _jsx(LoadingWrapper, { children: translate('openapi.loading', 'Loading...') }), children: _jsx(EmbeddedReplayOrig, { activeOperationId: activeOperationId, activeOperationPointer: pointer, api: fullOpenApi, settings: {
                    environment: appState.environment,
                    predefinedEnvValues: envs,
                    corsProxyUrl,
                    mockServer,
                    disableCollectionsTab: true,
                    telemetry: {
                        tracerName: 'replay-openapi',
                        collectorUrl: getDefaultCollectorUrl(),
                    },
                    convertOperationToReplayValue: (path, method, openAPI) => convertOperationToReplayValue(path, method, openAPI, undefined, operationState, appState),
                } }) })) : (_jsx(LoadingWrapper, { children: translate('openapi.loading', 'Loading...') })) }));
}
export const EmbeddedReplay = memo(EmbeddedReplayComponent);
const LoadingWrapper = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
`;
const CompactWrapper = styled.div `
  border: 1px solid var(--border-color-primary);
  border-radius: var(--border-radius-lg);
  padding: 0;
`;
//# sourceMappingURL=EmbeddedReplay.js.map