import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } 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.button(({ theme: { base: { spacing, palette, 'border-radius': borderRadius } } }) => {
    const { dark, 'primary-background': primaryBackground, interactive } = palette;
    const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));
    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));
    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));
    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 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: normal;
      }

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

        ${StyledBareButton} {
          color: inherit;
        }
      }

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

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

      &:focus,
      [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, onSelect, onRemove, onClick, onKeyUp, ...restProps }, ref) {
    const consolidatedRef = useConsolidatedRef(ref);
    const t = useI18n();
    const testIds = useTestIds(testId, getSelectableTestIds);
    const handleClick = (e) => {
        onClick?.(e);
        onSelect?.(id);
    };
    const handleCloseClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onRemove?.(id);
    };
    const handleKeyUp = (e) => {
        onKeyUp?.(e);
        if (e.key === 'Enter') {
            onSelect?.(id);
        }
        if (e.key === 'Backspace' || e.key === 'Delete') {
            onRemove?.(id);
        }
    };
    return (_jsxs(StyledSelectable, { "data-testid": testIds.root, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [_jsx("span", { "aria-hidden": true, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: '-1', onClick: handleCloseClick, "aria-label": t('remove_noun', [children]), children: _jsx(Icon, { name: 'times' }) }))] }));
});
export default withTestIds(Selectable, getSelectableTestIds);
//# sourceMappingURL=Selection.js.map