import { createElement } from 'react';
import { Canvas, Meta, Source, Story } from '@storybook/addon-docs/blocks';
import { Menu, Item, useContextMenu } from 'components/ContextMenu';
import Typography from 'components/Typography';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

<Meta title="Components API/ContextMenu" />

# ContextMenu

Allows you to provide the user additional actions. ContextMenus are opened by right-clicking on computers and long-pressing on touch devices.

<Canvas>
  <Story name="ContextMenu">
    {() => {
      const { show } = useContextMenu({ id: 'menu-1' });
      return (
        <>
          <Typography onContextMenu={show}>Right-click on me!</Typography>
          <Menu id="menu-1">
            <Item>Item 1</Item>
            <Item>Item 2</Item>
            <Item>Item 3</Item>
          </Menu>
        </>
      );
    }}
  </Story>
</Canvas>

<Source code="import { Menu, Item, useContextMenu } from 'cwb-react';" />

## Usage

In order to use ContextMenu, you must render the `Menu` with its `Item`s in your component. An `id` needs to be passed to the `Menu`, which can be a string or a number. In order to show the Menu, you need to use the `useContextMenu` hook, which receives an object that defines the Menu's `id`. It returns an object containing the `show` function, which you can pass as a callback into the `onContextMenu` prop to your right-clickable component.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    {createElement(() => {
      const { show } = useContextMenu({ id: 'menu-2' });
      const handleClick = ({ data, event, props, triggerEvent }) => {
        // take a look at the console to see what these are
        console.log({ data, event, props, triggerEvent });
      };
      return (
        <>
          <Typography
            onContextMenu={(e) =>
              show(e, {
                props: {
                  myProp: 'pass in some props here'
                }
              })
            }
          >
            Right-click to show menu with props.
          </Typography>
          <Menu id="menu-2">
            <Item data="foo" onClick={handleClick}>
              Item 1
            </Item>
            <Item data="bar" onClick={handleClick}>
              Item 2
            </Item>
            <Item onClick={handleClick}>Item 3</Item>
          </Menu>
        </>
      );
    })}
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        `const { show } = useContextMenu({ id: 'menu-2' });\n\n` +
        'const handleClick = ({ data, event, props, triggerEvent }) => {\n' +
        '  // take a look at the console to see what these are\n' +
        '  console.log({ data, event, props, triggerEvent });\n' +
        '};\n\n' +
        'return (\n' +
        '  <>\n' +
        '    <Typography onContextMenu={(e) => show(e, {\n' +
        '      props: {\n' +
        `        myProp: 'pass in some props here'\n` +
        '      }\n' +
        '    })}>\n' +
        '      Right-click to show menu with props.\n' +
        '    </Typography>\n' +
        '    <Menu id="menu-2">\n' +
        '      <Item data="foo" onClick={handleClick}>Item 1</Item>\n' +
        '      <Item data="bar" onClick={handleClick}>Item 2</Item>\n' +
        '      <Item onClick={handleClick}>Item 3</Item>\n' +
        '    </Menu>\n' +
        '  </>\n' +
        ');'
      }
    />
  </div>
</ThemeProvider>

For more information on ContextMenus, visit [here](https://fkhadra.github.io/react-contexify/). This component serves as a styled abstraction of fkhadra's react-contexify.