'use strict';

var useKeyboardShortcutsPaneState = require('./useKeyboardShortcutsPaneState-YnXpWOcs.js');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Close = require('@bigbinary/neeto-icons/Close');
var Typography = require('@bigbinary/neetoui/Typography');
var Button = require('@bigbinary/neetoui/Button');
var managers = require('@bigbinary/neetoui/managers');
var classnames = require('classnames');
var useHotkeys = require('@bigbinary/neeto-hotkeys');
var reactI18next = require('react-i18next');
var React = require('react');
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
var Kbd = require('@bigbinary/neetoui/Kbd');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var i18next = require('i18next');
var ramda = require('ramda');
var uaParser = require('./ua-parser-E0eEtHJZ.js');
var jsxRuntime = require('react/jsx-runtime');
var injectCss = require('./inject-css-B6qYtOJe.js');
require('zustand/shallow');
require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
require('zustand');

var KEY_SHORTFORM_MAP = {
  command: "⌘",
  escape: "esc",
  control: "ctrl",
  option: "opt",
  "return": "enter"
};
var MAC_TO_WINDOWS_KEYS_MAP = {
  option: "alt",
  command: "ctrl",
  "return": "enter",
  "delete": "backspace"
};
var OS = {
  mac: "macOS"};
var FULL_SHORTCUTS_LINK_PROP_NAME = "fullShortcutsLink";
var TOOLTIP_CONTENT = {
  "⌘": "command",
  esc: "escape",
  ctrl: "control",
  opt: "option",
  backspace: "delete"
};

var isMultipleHotkey = function isMultipleHotkey(hotkey) {
  return Array.isArray(hotkey);
};
var replaceKeys = function replaceKeys(hotkey, keyName, replaceWith) {
  return isMultipleHotkey(hotkey) ? hotkey.map(function (item) {
    return item.replaceAll(keyName, replaceWith);
  }) : hotkey.replaceAll(keyName, replaceWith);
};
var convertHotKeyToWindows = function convertHotKeyToWindows(hotkey) {
  ramda.toPairs(MAC_TO_WINDOWS_KEYS_MAP).forEach(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
      macKey = _ref2[0],
      windowsKey = _ref2[1];
    hotkey = replaceKeys(hotkey, macKey, windowsKey);
  });
  return hotkey;
};
var convertHotkeyToUsersPlatform = function convertHotkeyToUsersPlatform(hotkey) {
  var _result$os$name;
  var parser = new uaParser.UAParser(navigator.userAgent);
  var result = parser.getResult();
  var isOSX = (_result$os$name = result.os.name) === null || _result$os$name === void 0 ? void 0 : _result$os$name.includes(OS.mac);
  if (isOSX) return hotkey;
  return convertHotKeyToWindows(hotkey);
};
var shortenHotKey = function shortenHotKey(hotkey) {
  var result = hotkey;
  Object.entries(KEY_SHORTFORM_MAP).forEach(function (_ref3) {
    var _ref4 = _slicedToArray(_ref3, 2),
      longform = _ref4[0],
      shortform = _ref4[1];
    result = result.replaceAll(longform, shortform);
  });
  return result;
};
var getGlobalShortcuts = function getGlobalShortcuts() {
  return _defineProperty({}, i18next.t("neetoMolecules.keyboardShortcuts.global.categoryName"), {
    openKeyboardShortcutsPane: {
      sequence: "command+/",
      description: i18next.t("neetoMolecules.keyboardShortcuts.global.openKeyboardShortcutsPane")
    },
    close: {
      sequence: "esc",
      description: i18next.t("neetoMolecules.keyboardShortcuts.global.close")
    },
    submitForm: {
      sequence: "command+return",
      description: i18next.t("neetoMolecules.keyboardShortcuts.global.submitForm")
    },
    openProductSwitcher: {
      sequence: "command+u",
      description: i18next.t("neetoMolecules.keyboardShortcuts.global.openProductSwitcher")
    }
  });
};
var getTooltipProps = function getTooltipProps(key) {
  if (TOOLTIP_CONTENT[key]) {
    return {
      position: "top",
      content: TOOLTIP_CONTENT[key],
      followCursor: "horizontal"
    };
  }
  return null;
};

var HotKey$1 = function HotKey(_ref) {
  var description = _ref.description,
    sequence = _ref.sequence;
  var hotkey = shortenHotKey(convertHotkeyToUsersPlatform(sequence));
  var isSequentialHotkey = hotkey.includes(" ");
  var isSimultaneousHotkey = hotkey.includes("+");
  var isSingleKeyHotkey = !isSequentialHotkey && !isSimultaneousHotkey;
  var sequences = [];
  if (isSingleKeyHotkey) {
    sequences = [hotkey];
  } else if (isSequentialHotkey) {
    sequences = hotkey.split(" ");
  } else if (isSimultaneousHotkey) {
    sequences = hotkey.split("+");
  }
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: "my-3 w-full",
    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "flex items-center justify-between gap-3",
      "data-testid": "hotkey-item",
      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
        lineHeight: "normal",
        style: "body2",
        children: description
      }), /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "flex flex-shrink-0 items-center gap-1",
        children: sequences.map(function (keyName, idx) {
          return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
            children: [/*#__PURE__*/jsxRuntime.jsx(Kbd, {
              keyName: keyName,
              tooltipProps: getTooltipProps(keyName)
            }), isSequentialHotkey && idx + 1 !== sequences.length && /*#__PURE__*/jsxRuntime.jsx(Kbd, {
              keyName: "then"
            })]
          }, idx);
        })
      })]
    })
  });
};
var HotKey = /*#__PURE__*/React.memo(HotKey$1);

var HotKeyList$1 = reactUtils.withT(function (_ref) {
  var t = _ref.t,
    hotkeys = _ref.hotkeys;
  return Object.keys(hotkeys).map(function (categoryName) {
    var categoryValues = hotkeys[categoryName];
    var fullShortcutsLink = categoryValues[FULL_SHORTCUTS_LINK_PROP_NAME];
    return /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "mt-4 px-4",
      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
        style: "h6",
        textTransform: "uppercase",
        weight: "bold",
        children: categoryName
      }), Object.entries(categoryValues).map(function (_ref2) {
        var _ref3 = _slicedToArray(_ref2, 2),
          _ref3$ = _ref3[1],
          sequence = _ref3$.sequence,
          description = _ref3$.description;
        return sequence && /*#__PURE__*/React.createElement(HotKey, {
          description: description,
          sequence: sequence,
          key: sequence
        });
      }), fullShortcutsLink && /*#__PURE__*/jsxRuntime.jsx(Button, {
        className: "mb-3",
        href: fullShortcutsLink,
        style: "link",
        target: "_blank",
        label: t("neetoMolecules.keyboardShortcuts.viewFullListOfShortcuts")
      })]
    }, categoryName);
  });
});
var HotKeyList = /*#__PURE__*/React.memo(HotKeyList$1);

var css = ".neeto-molecules-keyboard-shortcuts-pane{flex-grow:0;flex-shrink:0;z-index:calc(var(--neeto-ui-modal-z-index) + 1)}";
injectCss.n(css,{});

var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
  var _ref$productShortcuts = _ref.productShortcuts,
    productShortcuts = _ref$productShortcuts === void 0 ? {} : _ref$productShortcuts;
  var _useKeyboardShortcuts = useKeyboardShortcutsPaneState.useKeyboardShortcutsPaneState(),
    _useKeyboardShortcuts2 = _slicedToArray(_useKeyboardShortcuts, 2),
    isOpen = _useKeyboardShortcuts2[0],
    setIsOpen = _useKeyboardShortcuts2[1];
  var hasOverlays = managers.manager.hasOverlays();
  // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
  var GLOBAL_SHORTCUTS = getGlobalShortcuts();
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var shortcuts = GLOBAL_SHORTCUTS[t("neetoMolecules.keyboardShortcuts.global.categoryName")];
  useHotkeys(shortcuts.openKeyboardShortcutsPane.sequence, function () {
    return setIsOpen(function (prevIsOpen) {
      return !prevIsOpen;
    });
  }, {
    mode: "global"
  });
  useHotkeys(shortcuts.close.sequence, function () {
    return setIsOpen(false);
  }, {
    mode: "global",
    enabled: isOpen
  });
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    "data-testid": "keyboard-shortcuts-pane",
    className: classnames("neeto-molecules-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width neeto-ui-bg-white ms-auto h-dvh overflow-hidden border-l duration-300 ease-in-out rtl:border-l-0 rtl:border-r", {
      "w-80": isOpen,
      "w-0": !isOpen,
      absolute: hasOverlays,
      "end-0": hasOverlays
    }),
    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "h-full w-80 overflow-y-auto",
      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "neeto-ui-border-gray-300 my-2 flex items-center justify-between border-b px-4 pb-2",
        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
          "data-testid": "keyboard-shortcuts-pane-title",
          style: "h4",
          children: t("neetoMolecules.keyboardShortcuts.title")
        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
          "data-testid": "keyboard-shortcuts-pane-close-button",
          icon: Close,
          style: "text",
          onClick: function onClick() {
            return setIsOpen(false);
          }
        })]
      }), /*#__PURE__*/jsxRuntime.jsx(HotKeyList, {
        hotkeys: GLOBAL_SHORTCUTS
      }), /*#__PURE__*/jsxRuntime.jsx(HotKeyList, {
        hotkeys: productShortcuts
      })]
    })
  });
};

var KeyboardShortcuts = {
  Pane: KeyboardShortcutsPane,
  usePaneState: useKeyboardShortcutsPaneState.useKeyboardShortcutsPaneState,
  GLOBAL_SHORTCUTS: getGlobalShortcuts()
};

module.exports = KeyboardShortcuts;
//# sourceMappingURL=KeyboardShortcuts.js.map
