import React from 'react';
import { TFunction } from 'i18next';

interface Shortcut {
  sequence: string;
  description: TFunction;
}
interface Category {
  [index: string]: Shortcut | string;
  fullShortcutsLink?: string;
}
interface ShortcutsObject {
  [index: string | TFunction]: Category;
}
/**
 *
 * A common component that accept's a list of all the keyboard shortcuts in a
 *
 * product and renders a side panel on the right side of the screen upon pressing a
 *
 * defined hotkey (shift+/).
 *
 * ![image](https://user-images.githubusercontent.com/29166133/223832668-2b92ff28-6565-434c-8a76-cf587c9dbc99.png|height=200|width=300)
 *
 * All the global shortcuts like open pane, close modal etc will be rendered by
 *
 * default by the component. It provides a single prop called productShortcuts
 *
 * which is used to pass in the product specific keyboard shortcuts. The prop's
 *
 * structure is given below:
 *
 * @example 
 *
 * {
 *   [i18n.t("shortcuts.category1.categoryName")]: {
 *     shortcutName: {
 *       sequence: "command+shift+r",
 *       description: "",
 *     },
 *   },
 *   [i18n.t("shortcuts.category2.categoryName")]: {
 *     shortcutName2: {
 *       sequence: "r s",
 *       description: "",
 *       fullShortcutsLink: "www.example.com/all-shortcuts"
 *     },
 *   },
 * }
 * @endexample
 * fullShortcutsLink is an optional property in the data structure which can be
 *
 * used to render links which points to external pages that lists all the
 *
 * shortcuts. This will be useful when the number of shortcuts under a category is
 *
 * very large.
 *
 * The sequence should be passed in MacOS format and the component will take care
 *
 * of detecting & converting it to the users platform. The component supports three
 *
 * kinds of sequence.
 *
 * @example 
 *
 * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
 * 
 * const App = () => (
 *   <Main />
 *   <KeyboardShortcuts.Pane productShortcuts={{
 *     [i18n.t("shortcuts.tickets.categoryName")]: {
 *       openNotes: {
 *         sequence: "command+shift+r",
 *         description: i18n.t("shortcuts.tickets.openNotes"),
 *       },
 *     },
 *   }}/>
 * )
 * @endexample
 * This hook can be used to manage the behavior of KeyboardShortcuts pane.
 *
 * This hook will return an array with exactly 2 values just like useState hook.
 *
 * @example 
 *
 * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
 * 
 * const [isOpen, setIsOpen] = KeyboardShortcuts.usePaneState();
 * 
 * return (
 *   <>
 *     <button onClick={() => setIsOpen(true)}> Open shortcuts pane</button>
 *     <button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>
 *       Toggle shortcuts pane
 *     </button>
 *   </>
 * );
 * @endexample
 * This constant exposes the list of global shortcuts displayed by the pane to the
 *
 * product.
 *
 * It will give the following shortcuts:
 *
 * @example 
 *
 * {
 *   GLOBAL: {
 *     openKeyboardShortcutsPane: {
 *       sequence: "shift+/",
 *       description: "See keyboard shortcuts",
 *     },
 *     close: {
 *       sequence: "esc",
 *       description: "Close modals, panes",
 *     },
 *     submitForm: {
 *       sequence: "command+return",
 *       description: "Submit form or text input",
 *     },
 *   },
 * }
 * @endexample
 * It can be used by the product to implement the shortcuts without needing to
 *
 * define the shortcut constant again.
 *
 * @example 
 *
 * import KeyboardShortcuts from "@bigbinary/neeto-molecules/KeyboardShortcuts";
 * import useHotkeys from "neetohotkeys";
 * 
 * useHotkeys(
 *   KeyboardShortcuts.GLOBAL_SHORTCUTS.GLOBAL.submitForm.sequence,
 *   keyboardShortCutHandlers.SUBMIT_FORM,
 *   { mode: "global" }
 * );
 * @endexample
*/
declare const KeyboardShortcuts: {
  Pane: React.FC<{
    productShortcuts?: ShortcutsObject;
  }>;
  usePaneState(): [boolean, React.Dispatch<React.SetStateAction<boolean>>];
  GLOBAL_SHORTCUTS: ShortcutsObject;
};

export { KeyboardShortcuts as default };