// @flow
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ContextMenu } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import { Box } from '../../../primitives/index';
import docs from './CONTEXT_MENU.mkd';

const items = [
  {
    id: 'login',
    label: <FormattedMessage id="Login as client" />,
    onSelect: action('Do login'),
  },
  {
    id: 'invite',
    label: <FormattedMessage id="Invite" />,
    onSelect: action('Do invite'),
  },
  {
    id: 'custom color',
    label: <FormattedMessage id="Custom Color" />,
    onSelect: action('Do invite'),
    textColorName: 'greyscale-medium',
  },
  {
    id: 'remove',
    label: <FormattedMessage id="Remove client" />,
    onSelect: action('Do Remove'),
    danger: true,
  },
];

storiesOf('Core/Actions/Context Menu', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <Box
        colorName="background"
        spacing={['mb7', 'p7']}
        stacked="row"
        justify="center"
      >
        <ContextMenu justify="right" items={items} />
      </Box>
    )),
  )
  .add(
    'loading',
    withDocs(docs)(() => (
      <Box
        colorName="background"
        spacing={['mb7', 'p7']}
        stacked="row"
        justify="center"
      >
        <ContextMenu justify="right" items={items} isLoading />
      </Box>
    )),
  );
