import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useCallback}from"react";import styled from"styled-components";import{LinkIcon}from"@redocly/theme";import{OperationResponseList}from"../Responses";import{RequestDetails}from"../Request/RequestDetails";import{LinkToField}from"../common/LinkToField";import{makeDeepLink}from"../../services";function CallbackDetailsComponent({operation:e}){var i;const t=useCallback((i=>_jsxs(Title,{children:[_jsx(LinkToField,{to:makeDeepLink(e.id,`${e.callbackId}/callback-response&c=${i.key}`)}),"Callback Response"]})),[e.callbackId,e.id]);return _jsxs(_Fragment,{children:[_jsx(RequestDetails,{operation:e,title:_jsxs(_Fragment,{children:[_jsx(LinkToField,{to:makeDeepLink(e.id,`${e.callbackId}/callback-request`)}),"Callback Request"]})}),(null===(i=e.responses)||void 0===i?void 0:i.length)?_jsx(OperationResponseList,{responses:e.responses,operationId:e.id,operationPointer:e.pointer,callbackId:e.callbackId,renderTitle:t}):null]})}export const CallbackDetails=memo(CallbackDetailsComponent);const Title=styled.h4`
  position: relative;
  font-size: var(--font-size-lg);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  padding: 0;
  color: var(--h4-text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--spacing-sm) 0 0;

  :hover {
    ${LinkIcon} {
      opacity: 1;
      visibility: visible;
    }
  }
`;
//# sourceMappingURL=CallbackDetails.js.map