/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import Tooltip from '@atlaskit/tooltip';
import { SortOrder } from '../types';
import { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
import { sortingAriaLabelMessages, sortingIconMessages } from './messages';
export let StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
  StatusClassNames["ASC"] = "sorting-icon-svg__asc";
  StatusClassNames["DESC"] = "sorting-icon-svg__desc";
  StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
  StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
  return StatusClassNames;
}({});

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
const buttonStyles = css`
	position: absolute;
	display: flex;
	height: 28px;
	width: 28px;
	margin: ${"var(--ds-space-075, 6px)"};
	right: 0;
	top: 0;
	border: ${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border, #0B120E24)"};
	border-radius: ${"var(--ds-radius-small, 4px)"};
	background-color: ${"var(--ds-surface-overlay, #FFFFFF)"};
	justify-content: center;
	align-items: center;
	cursor: pointer;

	&:hover {
		background-color: ${"var(--ds-surface-overlay-hovered, #F0F1F2)"};
	}

	&:active {
		background-color: ${"var(--ds-surface-overlay-pressed, #DDDEE1)"};
	}

	&.${SORTABLE_COLUMN_ICON_CLASSNAME}__not-allowed {
		cursor: not-allowed;
	}
`;

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
const iconWrapperStyles = css`
	width: 8px;
	height: 12px;
	transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);
	transform-origin: 50% 50%;
	display: flex;
	justify-content: center;

	&.${StatusClassNames.DESC} {
		transform: rotate(-180deg);
	}

	&.${SORTABLE_COLUMN_ICON_CLASSNAME}-inactive {
		opacity: 0.7;
	}
`;

// The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
// The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
// For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
const iconStyles = css({
  height: '100%',
  width: '2px',
  borderRadius: "var(--ds-radius-full, 9999px)",
  background: "var(--ds-icon, #292A2E)",
  userSelect: 'none',
  '&::before, &::after': {
    background: "var(--ds-icon, #292A2E)",
    content: "''",
    height: '2px',
    width: '6px',
    position: 'absolute',
    borderRadius: "var(--ds-radius-full, 9999px)"
  },
  '&::before': {
    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
  },
  '&::after': {
    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
  }
});
const getIconClassName = (isSortingAllowed, sortOrdered) => {
  const activated = sortOrdered !== SortOrder.NO_ORDER;
  const activeStatusClass = `${SORTABLE_COLUMN_ICON_CLASSNAME}-${activated ? 'active' : 'inactive'}`;
  if (!isSortingAllowed) {
    return `${StatusClassNames.SORTING_NOT_ALLOWED} ${activeStatusClass}`;
  }
  switch (sortOrdered) {
    case SortOrder.ASC:
      return `${StatusClassNames.ASC} ${activeStatusClass}`;
    case SortOrder.DESC:
      return `${StatusClassNames.DESC} ${activeStatusClass}`;
    default:
      return `${StatusClassNames.NO_ORDER} ${activeStatusClass}`;
  }
};
const getTooltipTitle = (intl, isSortingAllowed, sortOrdered) => {
  const {
    noOrderLabel,
    ascOrderLabel,
    descOrderLabel,
    invalidLabel
  } = sortingIconMessages;
  if (!isSortingAllowed) {
    return intl.formatMessage(invalidLabel);
  }
  switch (sortOrdered) {
    case SortOrder.NO_ORDER:
      return intl.formatMessage(noOrderLabel);
    case SortOrder.ASC:
      return intl.formatMessage(ascOrderLabel);
    case SortOrder.DESC:
      return intl.formatMessage(descOrderLabel);
  }
  return '';
};
const getAriaLabel = (intl, isSortingAllowed, sortOrdered) => {
  const {
    noOrderLabel,
    ascOrderLabel,
    descOrderLabel,
    invalidLabel,
    defaultLabel
  } = sortingAriaLabelMessages;
  if (!isSortingAllowed) {
    return intl.formatMessage(invalidLabel);
  }
  switch (sortOrdered) {
    case SortOrder.NO_ORDER:
      return intl.formatMessage(noOrderLabel);
    case SortOrder.ASC:
      return intl.formatMessage(ascOrderLabel);
    case SortOrder.DESC:
      return intl.formatMessage(descOrderLabel);
  }
  return intl.formatMessage(defaultLabel);
};
const SortingIcon = ({
  isSortingAllowed,
  sortOrdered,
  intl,
  onClick,
  onKeyDown
}) => {
  const buttonClassName = `${SORTABLE_COLUMN_ICON_CLASSNAME} ${sortOrdered !== SortOrder.NO_ORDER ? 'is-active' : ''}${isSortingAllowed ? '' : ` ${SORTABLE_COLUMN_ICON_CLASSNAME}__not-allowed `}`;
  const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
  const ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
  const handleClick = () => {
    if (isSortingAllowed) {
      onClick();
    }
  };
  const handleKeyDown = event => {
    if (isSortingAllowed) {
      onKeyDown(event);
    }
  };
  return jsx(Tooltip, {
    delay: 0,
    content: content,
    position: "top"
  }, jsx("div", {
    css: buttonStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: buttonClassName,
    role: "button",
    tabIndex: isSortingAllowed ? 0 : -1,
    "aria-label": ariaLabel,
    "aria-disabled": !isSortingAllowed,
    "aria-hidden": !isSortingAllowed,
    onClick: handleClick,
    onKeyDown: handleKeyDown
  }, jsx("div", {
    css: iconWrapperStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: getIconClassName(isSortingAllowed, sortOrdered)
  }, jsx("div", {
    css: [iconStyles]
  }))));
};
const _default_1 = injectIntl(SortingIcon);
export default _default_1;