import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, isValidElement } from 'react';
import styled, { css } from 'styled-components';
import { mix, readableColor, transparentize } from 'polished';
import { tryCatch, withTestIds } from '../../utils';
import BareButton, { StyledBareButton } from '../Button/BareButton';
import Icon, { registerIcon, StyledIcon } from '../Icon';
import * as timesIcon from '../Icon/icons/times.icon';
import { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import { readableHue } from '../../styles';
import { getSelectableTestIds } from './Badges.test-ids';
registerIcon(timesIcon);
export const StyledSelectable = styled.span(({ $hasRichContent, theme: { base: { spacing, palette, 'border-radius': borderRadius } } }) => {
    const { dark, 'primary-background': primaryBackground, interactive } = palette;
    const displayBackground = $hasRichContent
        ? tryCatch(() => transparentize(0.9, interactive))
        : tryCatch(() => mix(0.15, interactive, primaryBackground));
    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));
    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));
    const closeButtonColor = $hasRichContent
        ? tryCatch(() => readableColor(primaryBackground))
        : 'inherit';
    const height = 1.125;
    return css `
      background-color: ${displayBackground};
      border: 0 solid transparent;
      border-radius: calc(${height} * ${borderRadius});
      color: ${tryCatch(() => readableColor(displayBackground))};
      cursor: default;
      display: inline-flex;
      font-size: 0.75rem;
      height: ${height}rem;
      padding: 0 ${spacing};
      max-width: 100%;
      line-height: 1;

      span {
        display: flex;
        align-items: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      ${$hasRichContent &&
        css `
        ${StyledBareButton} {
          color: ${closeButtonColor};
        }
      `}

      &:hover,
      &:focus-within,
      [data-active-scope='true'] &[data-current='true'] {
        color: ${tryCatch(() => readableHue(interactive, displayBackground))};

        ${StyledBareButton} {
          color: ${closeButtonColor};
        }
      }

      &:hover {
        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};
      }

      &:active {
        box-shadow: inset 0 0 0 0.0625rem ${interactive};
      }

      &:focus-within,
      [data-active-scope='true'] &[data-current='true'] {
        box-shadow:
          0 0 0.5rem -0.125rem ${boxShadowColor},
          inset 0 0 0 0.125rem ${interactive};
        outline: none;
      }

      ${StyledIcon} {
        margin-inline-start: ${spacing};
        height: 1em;
        width: 1em;
      }
    `;
});
StyledSelectable.defaultProps = defaultThemeProp;
const Selectable = forwardRef(function Selectable({ testId, id, children, contextualLabel, onRemove, onKeyUp, tabIndex, ...restProps }, ref) {
    const consolidatedRef = useConsolidatedRef(ref);
    const t = useI18n();
    const testIds = useTestIds(testId, getSelectableTestIds);
    const handleCloseClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onRemove?.(id);
    };
    const handleKeyUp = (e) => {
        onKeyUp?.(e);
        if (e.key === 'Backspace' || e.key === 'Delete') {
            onRemove?.(id);
        }
    };
    const childrenIsJSX = isValidElement(children);
    const childrenIsPrimitive = typeof children === 'string' || typeof children === 'number';
    const shouldAriaHideChildren = onRemove && !childrenIsJSX;
    const resolvedChildrenText = contextualLabel || (childrenIsPrimitive ? String(children) : '');
    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, "$hasRichContent": childrenIsJSX, ref: consolidatedRef, onKeyUp: handleKeyUp, onKeyDown: e => {
            // Prevents back navigation in Firefox.
            if (e.key === 'Backspace')
                e.preventDefault();
        }, tabIndex: tabIndex, ...restProps, children: [_jsx("span", { "aria-hidden": shouldAriaHideChildren ? true : undefined, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: tabIndex === -1 ? -1 : undefined, onClick: handleCloseClick, "aria-label": t('remove_noun', [resolvedChildrenText]), children: _jsx(Icon, { name: 'times' }) }))] }));
});
export default withTestIds(Selectable, getSelectableTestIds);
//# sourceMappingURL=Selection.js.map