"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StatusClassNames = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _reactIntl = require("react-intl");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _types = require("../types");
var _consts = require("./consts");
var _messages = require("./messages");
var _templateObject, _templateObject2;
/**
 * @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
var StatusClassNames = exports.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
var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\tdisplay: flex;\n\theight: 28px;\n\twidth: 28px;\n\tmargin: ", ";\n\tright: 0;\n\ttop: 0;\n\tborder: ", " solid ", ";\n\tborder-radius: ", ";\n\tbackground-color: ", ";\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:active {\n\t\tbackground-color: ", ";\n\t}\n\n\t&.", "__not-allowed {\n\t\tcursor: not-allowed;\n\t}\n"])), "var(--ds-space-075, 6px)", "var(--ds-border-width-selected, 2px)", "var(--ds-border, #0B120E24)", "var(--ds-radius-small, 4px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-surface-overlay-hovered, #F0F1F2)", "var(--ds-surface-overlay-pressed, #DDDEE1)", _consts.SORTABLE_COLUMN_ICON_CLASSNAME);

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\twidth: 8px;\n\theight: 12px;\n\ttransition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n\ttransform-origin: 50% 50%;\n\tdisplay: flex;\n\tjustify-content: center;\n\n\t&.", " {\n\t\ttransform: rotate(-180deg);\n\t}\n\n\t&.", "-inactive {\n\t\topacity: 0.7;\n\t}\n"])), StatusClassNames.DESC, _consts.SORTABLE_COLUMN_ICON_CLASSNAME);

// 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
var iconStyles = (0, _react.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)'
  }
});
var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
  var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
  var activeStatusClass = "".concat(_consts.SORTABLE_COLUMN_ICON_CLASSNAME, "-").concat(activated ? 'active' : 'inactive');
  if (!isSortingAllowed) {
    return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
  }
  switch (sortOrdered) {
    case _types.SortOrder.ASC:
      return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
    case _types.SortOrder.DESC:
      return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
    default:
      return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
  }
};
var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
  var noOrderLabel = _messages.sortingIconMessages.noOrderLabel,
    ascOrderLabel = _messages.sortingIconMessages.ascOrderLabel,
    descOrderLabel = _messages.sortingIconMessages.descOrderLabel,
    invalidLabel = _messages.sortingIconMessages.invalidLabel;
  if (!isSortingAllowed) {
    return intl.formatMessage(invalidLabel);
  }
  switch (sortOrdered) {
    case _types.SortOrder.NO_ORDER:
      return intl.formatMessage(noOrderLabel);
    case _types.SortOrder.ASC:
      return intl.formatMessage(ascOrderLabel);
    case _types.SortOrder.DESC:
      return intl.formatMessage(descOrderLabel);
  }
  return '';
};
var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
  var noOrderLabel = _messages.sortingAriaLabelMessages.noOrderLabel,
    ascOrderLabel = _messages.sortingAriaLabelMessages.ascOrderLabel,
    descOrderLabel = _messages.sortingAriaLabelMessages.descOrderLabel,
    invalidLabel = _messages.sortingAriaLabelMessages.invalidLabel,
    defaultLabel = _messages.sortingAriaLabelMessages.defaultLabel;
  if (!isSortingAllowed) {
    return intl.formatMessage(invalidLabel);
  }
  switch (sortOrdered) {
    case _types.SortOrder.NO_ORDER:
      return intl.formatMessage(noOrderLabel);
    case _types.SortOrder.ASC:
      return intl.formatMessage(ascOrderLabel);
    case _types.SortOrder.DESC:
      return intl.formatMessage(descOrderLabel);
  }
  return intl.formatMessage(defaultLabel);
};
var SortingIcon = function SortingIcon(_ref) {
  var isSortingAllowed = _ref.isSortingAllowed,
    sortOrdered = _ref.sortOrdered,
    intl = _ref.intl,
    onClick = _ref.onClick,
    onKeyDown = _ref.onKeyDown;
  var buttonClassName = "".concat(_consts.SORTABLE_COLUMN_ICON_CLASSNAME, " ").concat(sortOrdered !== _types.SortOrder.NO_ORDER ? 'is-active' : '').concat(isSortingAllowed ? '' : " ".concat(_consts.SORTABLE_COLUMN_ICON_CLASSNAME, "__not-allowed "));
  var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
  var ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
  var handleClick = function handleClick() {
    if (isSortingAllowed) {
      onClick();
    }
  };
  var handleKeyDown = function handleKeyDown(event) {
    if (isSortingAllowed) {
      onKeyDown(event);
    }
  };
  return (0, _react.jsx)(_tooltip.default, {
    delay: 0,
    content: content,
    position: "top"
  }, (0, _react.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
  }, (0, _react.jsx)("div", {
    css: iconWrapperStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: getIconClassName(isSortingAllowed, sortOrdered)
  }, (0, _react.jsx)("div", {
    css: [iconStyles]
  }))));
};
var _default_1 = (0, _reactIntl.injectIntl)(SortingIcon);
var _default = exports.default = _default_1;