import ContextMenu from '../ContextMenu';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: ContextMenu,
  title: 'Modals/ContextMenu',
};

<Meta title="Modals/ContextMenu" component={ContextMenu} />

export const contextMenueTemplate = createComponentTemplate(ContextMenu);

<Heading
  title="ContextMenu"
  componentRelativePath="ContextMenu/ContextMenu.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

Context Menu is a component that is used to display a list of options to the
user. This component can be used for use cases such as opening a list of options
on user right click.

<Canvas>
  <Story
    name="Overview"
    args={{
      items: [
        {
          label: 'Delete measurement',
          actionType: 'Delete',
          action: item => {
            window.alert(`${item.label} clicked`);
          },
          value: {},
        },
        {
          label: 'Add Label',
          actionType: 'setLabel',
          action: item => {
            window.alert(`${item.label} clicked`);
          },
          value: {},
        },
      ],
    }}
  >
    {contextMenueTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={ContextMenu} />

## Contribute

<Footer componentRelativePath="ContextMenu/__stories__/contextMenu.stories.mdx" />
