import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLocation } from 'react-router-dom';
import { useTranslate } from '../../hooks/index.js';
import { CallbackPanel } from '../Panel/index.js';
import { CallbackDetails } from './CallbackDetails.js';
import { CallbackSummary } from './CallbackSummary.js';
import { pathIncludesLink } from '../../utils/index.js';
import { styled } from '../../styled-components.js';
export const CallbackOperation = ({ operation, operation: { callbackId }, onExpand, selectedCallback, }) => {
    const translate = useTranslate();
    const location = useLocation();
    const renderSummary = ({ expanded, toggle }) => {
        return (_jsx(CallbackSummary, { callback: operation, toggle: (params) => {
                toggle?.(params);
                onExpand?.(expanded ? null : operation);
            }, expanded: expanded, translate: translate }));
    };
    return (_jsx(CallbackPanel, { header: renderSummary, expanded: selectedCallback?.callbackId === callbackId || pathIncludesLink(location, callbackId), className: "panel-response-callback", children: _jsxs(CallbackDetailsWrap, { children: [_jsx(CallbackDetails, { operation: operation, translate: translate }), _jsx(LeftBorder, {})] }) }));
};
const CallbackDetailsWrap = styled.div `
  position: relative;
  .property:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
`;
const LeftBorder = styled.div `
  position: absolute;
  height: calc(100% + 14px);
  border-left: 1px solid var(--border-color-primary);
  top: -14px;
  left: -12px;
  z-index: 0;
`;
//# sourceMappingURL=CallbackOperation.js.map