import { Box, SidePanel, Text } from "@wix/design-system";
import React, { Fragment, useContext, useMemo } from "react";
import { RicosContext, ShortcutsContext } from "./../../ricos-context/index.js";
import { useModalService } from "./../../ricos-modals/index.js";
import { PanelHeader } from "./../../ui-components/index.js";
import { ShortcutsSheet } from "./shortcuts-sheet.js";
const SHORTCUT_SHEET_MODAL_ID = "shortcuts-help";
const SHORTCUT_DIALOG_WIDTH = 380;
const SHORTCUT_DIALOG_MAX_HEIGHT = 600;
const ShortcutsDialog = () => {
  const modalService = useModalService();
  const ricosContext = useContext(RicosContext);
  const shortcuts = useContext(ShortcutsContext);
  const { t, platform } = ricosContext;
  const handleClose = () => modalService.closeModal(SHORTCUT_SHEET_MODAL_ID);
  const { sortedDisplayData, title } = useMemo(() => {
    const sheet = new ShortcutsSheet(shortcuts, ricosContext);
    const displayData = sheet.getDisplayData();
    const helpShortcutKeys = shortcuts.getShortcutDisplayData(
      "OpenShortcutsSheet",
      t,
      platform
    ).keyCombinationText;
    return {
      sortedDisplayData: displayData,
      title: `${t("ShortcutsSheet_Title")} ${helpShortcutKeys}`
    };
  }, [shortcuts, t, platform]);
  const renderShortcutKeys = (keys) => {
    if (Array.isArray(keys)) {
      return keys.map((key, index) => /* @__PURE__ */ React.createElement(Fragment, { key }, /* @__PURE__ */ React.createElement(Box, { gap: "6px" }, renderShortcutKeys(key)), index < keys.length - 1 && /* @__PURE__ */ React.createElement("span", null, t("ShortcutsSheet_Key_Separator"))));
    }
    return keys.split(" ").map((key) => /* @__PURE__ */ React.createElement(
      Box,
      {
        key,
        height: 30,
        width: 30,
        align: "center",
        verticalAlign: "middle",
        borderRadius: "6px",
        border: "1px solid",
        borderColor: "D60",
        flexShrink: 0
      },
      /* @__PURE__ */ React.createElement(Text, { size: "small", weight: "thin", secondary: true }, key)
    ));
  };
  const renderShortcutsGroup = (groupName, shortcuts2) => /* @__PURE__ */ React.createElement(SidePanel.Section, { key: groupName, titleVisible: false }, /* @__PURE__ */ React.createElement(Box, { padding: "SP3", paddingLeft: "SP4", paddingRight: "SP4" }, /* @__PURE__ */ React.createElement(Text, { weight: "bold", size: "medium" }, t(groupName))), /* @__PURE__ */ React.createElement(
    Box,
    {
      paddingLeft: "SP4",
      paddingRight: "SP4",
      paddingTop: "SP1",
      paddingBottom: "SP3",
      gap: "SP3",
      direction: "vertical"
    },
    shortcuts2.map((shortcut) => /* @__PURE__ */ React.createElement(SidePanel.Field, { key: shortcut.name, divider: false, noPadding: true }, /* @__PURE__ */ React.createElement(Box, { verticalAlign: "middle", align: "space-between" }, /* @__PURE__ */ React.createElement(Text, null, shortcut.description), /* @__PURE__ */ React.createElement(Box, { gap: "SP1" }, renderShortcutKeys(shortcut.keyCombinationText)))))
  ));
  return /* @__PURE__ */ React.createElement(
    SidePanel,
    {
      closeButtonProps: {
        onClick: handleClose
      },
      skin: "floating",
      maxHeight: SHORTCUT_DIALOG_MAX_HEIGHT,
      width: SHORTCUT_DIALOG_WIDTH,
      draggable: true
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title }),
    /* @__PURE__ */ React.createElement(SidePanel.Content, { noPadding: true }, /* @__PURE__ */ React.createElement(Box, { direction: "vertical", overflow: "auto", height: "100%" }, Object.entries(sortedDisplayData).map(
      ([groupName, shortcuts2]) => renderShortcutsGroup(groupName, shortcuts2)
    )))
  );
};
export {
  SHORTCUT_SHEET_MODAL_ID,
  ShortcutsDialog
};
//# sourceMappingURL=shortcuts-dialog.js.map
