import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useState, useCallback, useMemo } from 'react';
import { useAtomValue } from 'jotai';
import { LayoutVariant } from '@redocly/config';
import { AfterOpenApiOperation } from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
import { BeforeOpenApiOperation } from '@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
import { Feedback } from '@redocly/theme/components/Feedback/Feedback';
import { SamplesMiddlePanel, SamplesPanel, ShareLink, Row, CustomBadges } from '../common/index.js';
import { CallbacksList } from '../Callbacks/index.js';
import { CallbackSamples } from '../CallbackSamples/index.js';
import { RequestSamples } from '../RequestSamples/index.js';
import { OperationResponseList } from '../Responses/index.js';
import { ResponseSamples } from '../ResponseSamples/index.js';
import { makeDeepLink, joinWithSeparator } from '../../services/index.js';
import { layoutAtom, userClaimsAtom } from '../../jotai/app.js';
import { globalOptionsAtom, globalStoreAtom } from '../../jotai/store.js';
import { getOperation } from '../../models/operation.js';
import { RenderHook } from '../RenderHook/index.js';
import { Heading, HeadingWrapper, Title } from '../common/OperationItemTitle.js';
import { LinkToField } from '../common/LinkToField.js';
import { RequestDetails } from '../Request/RequestDetails.js';
import { StyledBadge } from '../common/Badges.js';
import { useTranslate } from '../../hooks/index.js';
import { styled } from '../../styled-components.js';
import { createPanelToggleEvent } from '../../events/index.js';
function OperationItemComponent({ item: { operationDefinition, parent, href }, }) {
    const translate = useTranslate();
    const { parser, options } = useAtomValue(globalStoreAtom);
    const { events } = useAtomValue(globalOptionsAtom);
    const userClaims = useAtomValue(userClaimsAtom);
    const layout = useAtomValue(layoutAtom);
    const [activeResponseTab, setActiveResponseTab] = useState();
    const { unstable_hooks, feedback } = options;
    const operation = useMemo(() => getOperation(parser, operationDefinition, parent, options, href, undefined, userClaims), [href, operationDefinition, options, parent, parser, userClaims]);
    const { name: summary, deprecated, isWebhook, badges } = operation || {};
    const isStacked = layout === LayoutVariant.STACKED;
    const feedbackType = feedback?.type || 'sentiment';
    const displayFeedback = feedback?.hide !== true;
    const operationSlug = joinWithSeparator(options.routingBasePath, operation.href);
    const [selectedCallback, setSelectedCallback] = useState(null);
    const handleActiveResponseChange = useCallback((tab) => {
        if (activeResponseTab !== tab) {
            setActiveResponseTab(tab);
        }
    }, [activeResponseTab]);
    const handlePanelToggle = useCallback((isExpanded, panelType) => {
        if (!panelType) {
            return;
        }
        const event = createPanelToggleEvent({
            operation,
            isExpanded,
            panelType,
        });
        events?.panelToggle?.(event);
    }, [events, operation]);
    const renderFeedback = useMemo(() => displayFeedback ? (_jsx(FeedbackWrapper, { children: _jsx(Feedback, { type: feedbackType, settings: feedback.settings, path: operationSlug }) })) : null, [displayFeedback, feedbackType, feedback.settings, operationSlug]);
    return (_jsxs(OperationRow, { layout: layout, children: [_jsx(OperationSubRowStyled, { layout: layout, children: _jsxs(SamplesMiddlePanel, { isStacked: isStacked, children: [_jsx(RenderHook, { Hook: BeforeOpenApiOperation || unstable_hooks?.BeforeOperation, props: { operation } }), _jsxs(HeadingWrapper, { children: [_jsxs(Heading, { "data-testid": "operation-item-header", children: [_jsx(ShareLink, { to: href, "aria-label": `link to ${summary}` }), _jsx(CustomBadges, { badges: badges, children: summary }), deprecated && (_jsx(StyledBadge, { deprecated: true, children: translate('openapi.badges.deprecated', 'Deprecated') })), isWebhook && (_jsx(StyledBadge, { children: translate('openapi.badges.webhook', 'Webhook') }))] }), _jsx(PageActions, { pageSlug: operationSlug })] })] }) }), _jsxs(OperationSubRowStyled, { layout: layout, children: [_jsx(SamplesMiddlePanel, { isStacked: isStacked, children: _jsx(RequestDetails, { operation: operation, translate: translate, onPanelToggle: handlePanelToggle }) }), _jsx(OperationSamplesPanel, { isStacked: isStacked, "data-testid": "samples-block", className: "panel-container-request-samples", children: _jsx(RequestSamples, { operation: operation, onPanelToggle: handlePanelToggle }) })] }), _jsxs(OperationSubRowStyled, { layout: layout, children: [_jsx(SamplesMiddlePanel, { isStacked: isStacked, children: operation.responses?.length ? (_jsx(OperationResponseList, { responses: operation.responses, operationId: operation.id, operationPointer: operation.pointer, callbackId: operation.callbackId, activeResponseTab: activeResponseTab, onTabChange: handleActiveResponseChange, onPanelToggle: handlePanelToggle })) : null }), _jsx(OperationSamplesPanel, { isStacked: isStacked, "data-testid": "samples-block", className: "panel-container-response-samples", children: _jsx(ResponseSamples, { operation: operation, activeResponseTab: activeResponseTab, onTabChange: handleActiveResponseChange, onPanelToggle: handlePanelToggle }) })] }), _jsxs(OperationSubRowStyled, { layout: layout, children: [_jsxs(SamplesMiddlePanel, { isStacked: isStacked, children: [operation.callbacks?.length ? (_jsxs(_Fragment, { children: [_jsxs(Title, { children: [_jsx(LinkToField, { to: makeDeepLink(operation.id, 'callbacks') }), translate('openapi.callbacks', 'Callbacks')] }), _jsx(CallbacksList, { callbacks: operation.callbacks, onExpand: setSelectedCallback, selectedCallback: selectedCallback })] })) : null, _jsx(RenderHook, { Hook: AfterOpenApiOperation || unstable_hooks?.AfterOperation, props: { operation } })] }), selectedCallback ? (_jsx(OperationSamplesPanel, { isStacked: isStacked, "data-testid": "samples-block", children: _jsx(CallbackSamples, { callback: selectedCallback, translate: translate }) })) : null] }), _jsx(OperationSubRowStyled, { layout: layout, children: _jsx(SamplesMiddlePanel, { isStacked: isStacked, fullWidth: true, children: renderFeedback }) })] }));
}
export const OperationItem = memo(OperationItemComponent);
export const OperationSamplesPanel = styled(SamplesPanel) `
  margin-left: auto;
  --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) 20px;
`;
const FeedbackWrapper = styled.div `
  & > div {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  & > div > div {
    width: 100%;
    max-width: var(--feedback-width);
  }
`;
const OperationRow = styled(Row) `
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-base) 0 calc(var(--spacing-xl) + var(--spacing-xs));
`;
const OperationSubRowStyled = styled(Row) `
  margin: calc(var(--spacing-unit) * 2) 0;
`;
//# sourceMappingURL=OperationItem.js.map