import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAtomValue } from 'jotai';
import { LayoutVariant } from '@redocly/config';
import { breakpoints } from '@redocly/theme/core/openapi';
import { Button } from '@redocly/theme/components/Button/Button';
import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
import { H2 } from '@redocly/theme/components/Typography/H2';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
import { Row, SamplesMiddlePanel, ShareLink } from '../common/index.js';
import { Markdown } from '../Markdown/index.js';
import { OperationsNavigation } from './OperationsNavigation.js';
import { layoutAtom } from '../../jotai/app.js';
import { useTranslate } from '../../hooks/index.js';
import { styled } from '../../styled-components.js';
export function TagItemComponent({ item, routingBasePath = '', isExpanded, }) {
    const translate = useTranslate();
    const { description, name, href } = item;
    const navigate = useNavigate();
    const layout = useAtomValue(layoutAtom);
    const tagItemSlug = routingBasePath + item.href;
    const handleClick = useCallback(() => {
        navigate(tagItemSlug);
    }, [navigate, tagItemSlug]);
    const expandable = Boolean(item.items.length);
    const isStacked = layout === LayoutVariant.STACKED;
    return (_jsxs(Wrapper, { expanded: isExpanded, children: [_jsxs(Row, { layout: layout, children: [_jsxs(SamplesMiddlePanel, { fullWidth: !expandable, isStacked: isStacked, children: [_jsxs(Heading, { children: [_jsx(ShareLink, { to: href, "aria-label": `link to ${name}` }), name, _jsx(PageActions, { pageSlug: tagItemSlug })] }), _jsx(Markdown, { source: description })] }), expandable && (_jsx(OperationsNavigation, { items: item.items, routingBasePath: routingBasePath }))] }), expandable && !isExpanded && (_jsxs(ShowButton, { type: "button", variant: "text", size: "medium", onClick: handleClick, children: ["+ ", translate('openapi.actions.show', 'Show')] }))] }));
}
export const TagItem = memo(TagItemComponent);
const Wrapper = styled.div `
  padding-top: var(--spacing-lg);
  padding-bottom: ${({ expanded }) => (expanded ? 'var(--spacing-xxl)' : '')};
`;
const ShowButton = styled(Button) `
  margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xxs);
  width: calc(100% - var(--spacing-xl) * 2);

  @media screen and (min-width: ${breakpoints.medium}) {
    --button-margin-md: calc(var(--spacing-xl) * 2);

    margin-left: var(--button-margin-md);
    margin-right: var(--button-margin-md);
    width: calc(100% - var(--button-margin-md) * 2);
  }
`;
const Heading = styled(H2) `
  display: flex;
  :hover {
    ${LinkIcon} {
      opacity: 1;
      visibility: visible;
    }
  }
`;
//# sourceMappingURL=TagItem.js.map