import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useCallback } from 'react';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
import { OperationResponseList } from '../Responses/index.js';
import { RequestDetails } from '../Request/RequestDetails.js';
import { LinkToField } from '../common/LinkToField.js';
import { makeDeepLink } from '../../services/index.js';
import { styled } from '../../styled-components.js';
function CallbackDetailsComponent({ operation, translate }) {
    const renderResponseTitle = useCallback((tab) => (_jsxs(Title, { children: [_jsx(LinkToField, { to: makeDeepLink(operation.id, `${operation.callbackId}/callback-response&c=${tab.key}`) }), translate('openapi.callbackResponse', 'Callback Response')] })), [operation.callbackId, operation.id, translate]);
    return (_jsxs(_Fragment, { children: [_jsx(RequestDetails, { operation: operation, title: _jsxs(_Fragment, { children: [_jsx(LinkToField, { to: makeDeepLink(operation.id, `${operation.callbackId}/callback-request`) }), translate('openapi.callbackRequest', 'Callback Request')] }) }), operation.responses?.length ? (_jsx(OperationResponseList, { responses: operation.responses, operationId: operation.id, operationPointer: operation.pointer, callbackId: operation.callbackId, renderTitle: renderResponseTitle })) : 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