import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Suspense,memo,useCallback,useState,useRef}from"react";import{Button,RocketIcon,CircleDashIcon,Portal,useFocusTrap,useModalScrollLock}from"@redocly/theme";import styled from"styled-components";import{useAtom,useAtomValue,useSetAtom}from"jotai";import{ReplayOverlay}from"@redocly/replay";import{globalOptionsAtom,globalStoreAtom}from"../../jotai/store";import{replayStateAtom}from"../../jotai/replay";import{operationStore}from"../../jotai/operation";import{LOADING_STATE}from"../../constants";import{activeMimeNameAtom,unsupportedFeatureScreenAtom,environmentAtom}from"../../jotai/app";import{isMobile}from"../../utils";import{convertOperationToReplayValue}from"./utils";function ReplayComponent({operation:e,corsProxyUrl:o,fullOpenApi:t}){var r,a;const n=useRef(null),{routingBasePath:i,mockServer:s,oAuth2RedirectURI:l}=useAtomValue(globalOptionsAtom),{parser:m}=useAtomValue(globalStoreAtom),[p,c]=useState(!1),[u,A]=useAtom(replayStateAtom),[,d]=useAtom(unsupportedFeatureScreenAtom),v=useSetAtom(operationStore(e.pointer)),[S,f]=useAtom(activeMimeNameAtom),[[,y],x]=useAtom(environmentAtom);useFocusTrap(n),useModalScrollLock(p);const I=useCallback((({requestValues:e,activeExampleName:o,activeMimeName:t,environment:r,environments:a,activeSecuritySchemeIds:n})=>{v((t=>Object.assign(Object.assign({},t),{requestValues:e,activeExampleName:o,activeSecuritySchemeIds:n}))),f(t||S),x({environment:r,environments:a})}),[v,f,S,x]),O=()=>{isMobile({tablet:!0})?d(!0):(u!==LOADING_STATE.LOADING&&c(!p),u===LOADING_STATE.NOT_LOADED&&A(LOADING_STATE.LOADING))};return _jsxs(Wrapper,{children:[_jsx("span",{children:"Experience it firsthand in the API Explorer!"}),_jsx(Button,{onClick:O,variant:"primary",iconPosition:"left",icon:u===LOADING_STATE.LOADING?_jsx(CircleDashIcon,{}):_jsx(RocketIcon,{}),children:u===LOADING_STATE.LOADING?"Loading...":"Try it"}),p&&_jsx(Suspense,{children:_jsx(Portal,{mountId:"api-content",children:_jsx("div",{ref:n,children:_jsx(ReplayOverlay,{value:convertOperationToReplayValue(e,t),onRequestChange:I,onClose:O,corsProxyUrl:o,operationUrl:i+e.href,onLoad:()=>A(LOADING_STATE.LOADED),mockServer:s,environment:y,apiId:null===(a=null===(r=null==m?void 0:m.definition.info)||void 0===r?void 0:r["x-metadata"])||void 0===a?void 0:a.apiId,oAuth2RedirectURI:l})})})})]})}export const Replay=memo(ReplayComponent);const Wrapper=styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: var(--panel-border);
  padding: var(--spacing-base) var(--spacing-md) var(--spacing-md);

  & > span {
    font-weight: var(--font-weight-regular);
    color: var(--text-color-primary);
  }
`;
//# sourceMappingURL=Replay.js.map