import { jsx as _jsx } from "react/jsx-runtime";
import { css } from 'styled-components';
import { useLocation } from 'react-router-dom';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
import { encodeBackSlashes } from '../../utils/string.js';
import { constructFieldDeepFragment, joinWithSeparator } from '../../services/history/helpers.js';
import { ShareLink } from './linkify.js';
import { styled } from '../../styled-components.js';
export function generateDeepLink(field, activeMimeName) {
    const operation = field.deps.operation;
    const fieldFragment = constructFieldDeepFragment(field, activeMimeName);
    //Models doesnt have operation.id
    if (!operation?.id && !operation.isCallback) {
        return '#' + fieldFragment.toLowerCase();
    }
    const deepLink = joinWithSeparator(operation.href, joinWithSeparator(operation.id, fieldFragment), '#');
    return encodeBackSlashes(deepLink.toLowerCase());
}
export const LinkToField = ({ to, className, }) => {
    const deepLink = to;
    const location = useLocation();
    const hash = deepLink?.split('#')[1];
    const isActive = location ? location.hash === `#${hash}` : false;
    return (_jsx(ShareLinkToField, { ariaLabel: `link  to ${deepLink}`, className: className, isActive: isActive, to: deepLink, id: hash }));
};
export const ShareLinkToField = styled(ShareLink) `
  display: flex;
  ${LinkIcon} {
    visibility: hidden;
    cursor: pointer;
    background-color: var(--bg-color);
  }

  ${({ isActive }) => isActive &&
    css `
      ${LinkIcon} {
        visibility: visible;
        opacity: 1;
      }
    `}
  :hover ${LinkIcon}, :focus ${LinkIcon} {
    visibility: visible;
    opacity: 1;
  }
`;
//# sourceMappingURL=LinkToField.js.map